Rendering data from an array of objects

Question

I have integrated the search filter and retrieved the json data( array of objects ) using the post method based on the search term. The json output is given below:

[
  {"taxi_code":"CT0001","class":"0"},
  {"taxi_code":"CT0002","class":"0"},
  {"taxi_code":"CT0003","class":"0"}
]  

But the json data is not rendered to the DisplayTable component even using map method. What i did wrong?? Using console.log(<DisplayTable data={queryResult} />), i got this type of output: Object { props={...}, _store={...}, $$typeof=Symbol {}, more...}

class Results extends Component
{
      constructor(props){
                 super(props);
                 this.state={searchTerm:''};       
      }
      render(){
          return(<div id="results" className="search-results">
                  {this.props.data}
                  <SearchInput className="search-input" onChange={e=>this.searchUpdated(e)} />
                 </div>);
      }
      searchUpdated (e) {
          this.setState={searchTerm: e};
          var queryResult;
          axios.post(config.api.url + 'public/getAttributesbyname', {'searchTerm':e,'name':this.props.data})
              .then(response => {

               var queryResult = response.data;
              render()
              {

              return (<DisplayTable data={queryResult}/>);
              }
              })
              .catch(response => {

              });
      }
  }

 class DisplayTable extends Component
 {
    render()
    {
        return this.props.data.map((alldata)=> {
            return <div className="station">{alldata.taxi_code}</div>;
        });
    }
 }

Answer 1

You have several mistakes in your code,

1. You can't return values from asynchronous function(axios.post)
2. this.setState is method and you have to call it this.setState() but not assign value to it

I think in this case you don't need handle state from input field searchTerm, you can get value from input and use it., however you should handle state for data which you get from server.

I've refactored your example, and now it looks like this

class Results extends Component {
  constructor(props) {
    super(props);
    this.state = { data: [] };
  }

  render(){
    return <div id="results" className="search-results">
      <DisplayTable data={ this.state.data } />
      <SearchInput 
        className="search-input" 
        onChange={ e => this.searchUpdated(e) } 
      />
    </div>;
  }

  searchUpdated (e) {
    axios
      .post(config.api.url + 'public/getAttributesbyname', {
        searchTerm: e.target.value, 
        name: this.props.data 
      })
      .then(response => {
        this.setState({ data: response.data });
      })
     .catch(response => {});
  }
}

class DisplayTable extends Component {
  render() {
    const stations = this.props.data.map((alldata, index) => {
      return <div className="station" key={ index }>{ alldata.taxi_code }</div>;
    });

    return <div>{ stations }</div>
  }
}