Rendering data from an array of objects
<p>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:</p>

<pre><code>[
  {"taxi_code":"CT0001","class":"0"},
  {"taxi_code":"CT0002","class":"0"},
  {"taxi_code":"CT0003","class":"0"}
]  
</code></pre>

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

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

               var queryResult = response.data;
              render()
              {

              return (&lt;DisplayTable data={queryResult}/&gt;);
              }
              })
              .catch(response =&gt; {

              });
      }
  }

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