map function value not displaying

Question

In console.log the api fetched data are displaying but in browser itis showing only white screen. In map function have to update the state function

import React, { Component } from 'react';;
import * as algoliasearch from "algoliasearch";
class App extends React.Component {

  constructor() {
    super();
    this.state = {
      data: { hits: [] }
    }
    // set data to string instead of an array  
  }

  componentDidMount() {
    this.getData();
  }

  getData() {
    var client = algoliasearch('api-id', 'apikey');
    var index = client.initIndex('');
    //index.search({ query:""}, function(data){  console.log(data) })    
    //index.search({ query:""}, function(data){  console.log("DataRecib=ved. First check this") }) 

    index.search({
      query: "",
      attributesToRetrieve: ['ItemRate', 'Color'],
      hitsPerPage: 50,
    },
    function searchDone(error, data) {
      console.log(data.hits)
    });
  }

  render() {
    return (
      <div id="root">
        {
          this.state.data.hits.map(function (data, index) {
            return
            <h1>{this.setState.data.ItemRate}<br />{data.Color}</h1> >            
            })}
      </div>
    );
  }
}
//render(<App />, document.getElementById('app')); 
export default App;

Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Agney, Dec 31 '18 at 08:25

score 1 · Answer 1 · edited Dec 31 '18 at 10:39

Couple of mistakes -:

You just need to use this.state.data.ItemRate instead of this.setState.data.ItemRate.
You can get state inside .map using arrow functions ( . )=> { . }

Visit https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/

render() {

return (
  <div id="root" >


  {

   this.state.data.hits.map((data,index) => {

    return<h1>{this.state.data.ItemRate}<br />{data.Color}</h1>
   }

Liren Yeo · Accepted Answer · 2018-12-31T09:07:04.437

0

Every this.setState triggers a render() call. If you setState inside render method, you go into an infinity loop.

You want to update this.state.data.hits inside getData() function, then you can display the data like so:

this.state.data.hits.map(data =>
  <h1>{data.Color}</h1>
)

For example, if console.log(data.hits) logs out the correct data, then you can:

this.setState({
  data: {
    hits: data.hits
  }
})

EDIT:

Using the code you provided, it should be like this:'

getData = () => {
  var client = algoliasearch('A5WV4Z1P6I', '9bc843cb2d00100efcf398f4890e1905');
  var index = client.initIndex('dev_twinning');
  //index.search({ query:""}, function(data){ console.log(data) }) 
  // index.search({ query:""}, function(data){ console.log("Data Recib=ved. First check this") }) 
  index.search({
    query: "",
    attributesToRetrieve: ['ItemRate', 'Color'],
    hitsPerPage: 50,
  }, searchDone = (error, data) => {
    this.setState({
      data: {
        hits: data.hits
      }
    })
    console.log(data.hits)
  })
}

edited Dec 31 '18 at 09:07

answered Dec 31 '18 at 08:37

Liren Yeo

3,215
2
20
41

at the part where you are able to correctly `console.log` the data, is where you can `setState`. Check updated answer. – Liren Yeo Dec 31 '18 at 08:58
getData(){ var client = algoliasearch('A5WV4Z1P6I', '9bc843cb2d00100efcf398f4890e1905'); var index = client.initIndex('dev_twinning'); //index.search({ query:""}, function(data){ console.log(data) }) // index.search({ query:""}, function(data){ console.log("Data Recib=ved. First check this") }) index.search({ query:"", attributesToRetrieve: ['ItemRate', 'Color'], hitsPerPage: 50,}, function searchDone(error, data){ this.setState({ data: { hits: data.hits } }) console.log(data.hits) } ) } – Johny Dec 31 '18 at 09:00
thank you for your reply. but i got error like "TypeError: this.setState is not a function" – Johny Dec 31 '18 at 09:00
I think it's the `cannot read property of setState` error right? Change `getData()` into an arrow function. I will update the answer – Liren Yeo Dec 31 '18 at 09:02
got error like TypeError: this.setState is not a function – Johny Dec 31 '18 at 09:06
@Lidiyam yea, that's why you need to use arrow function on both `getData` and `searchDone`. – Liren Yeo Dec 31 '18 at 09:08

map function value not displaying

2 Answers2