Pfthb

after tried to set a simple search in the logs show this:

everything seems very ok and standardized so a couple of searches i still have any idea why this error is happening.

i've tried with fetch and the same result

please, someone can elucidate, why this error is happening?

the code:

import React, Component from "react";
import axios from "axios";

import Suggestions from "./suggestions";

class Search extends Component 
 constructor(props) 
 super(props);

 this.state = 
 term: "",
 error: false,
 results: 
 ;
 

 onChange(e) 
 this.setState(
 term: e.target.value ,

 () => 
 axios
 .get("/search?q=" + this.state.term)
 .then(res => this.setState( results: res.data ))
 .catch(() => this.setState( error: true ));
 
 );
 

 render() 
 return (
 <div id="searchbox">
 <div>
 <form>
 <input
 ref=input => 
 this.search = input;
 
 value=this.state.term
 onChange=this.onChange.bind(this)
 type="text"
 placeholder="Search..."
 />

 <button type="submit">
 <i className="search icon" />
 </button>
 <Suggestions results=this.state.results />
 </form>
 </div>
 </div>
 );
 


export default Search;

the suggestion

import React from "react";

const Suggestions = props => 
 const resultList = props.results.map(r => <li key=r.id>r.title</li>);
 return <ul>resultList</ul>;
;

export default Suggestions;

response

res.data will give you the entire parsed JSON response, but you want the array that is the value of the posts property instead.

axios
 .get("/search?q=" + this.state.term)
 .then(res => this.setState( results: res.data.posts ))
 .catch(() => this.setState( error: true ));

IMO you need use

axios
 .get("/search?q=" + this.state.term)
 .then(res => this.setState( results: res.data.posts ))
 .catch(() => this.setState( error: true ));

and not

axios
 .get("/search?q=" + this.state.term)
 .then(res => this.setState( results: res.data ))
 .catch(() => this.setState( error: true ));