How to map object data and render in React?

Question

I am trying to render the data returned from a graphql query but I am getting the error TypeError: Cannot read property 'map' of undefined

If I log the data to the console, I am able to see that it was returned successfully:

{listTalks: Array(100)}
    listTalks: Array(100)
        [0...99]
            0: {ID: "xxxxxxxy", speakerName: "Bob", name: "Talk1", description: "text"}
            1: {ID: "xxxxxxyy", speakerName: "Joe", name: "Talk2", description: "text"}
            2: {ID: "xxxxxyyy", speakerName: "Carry", name: "Talk3", description: "text"}
            3: {ID: "xxxxyyyy", speakerName: "Kyle", name: "Talk4", description: "text"}
            4: {ID: "xxxyyyyy", speakerName: "Mark", name: "Talk5", description: "text"}

However when I map the data to try and render it, the error appears.

Full code below:

class App extends React.Component {

  // define some state to hold the data returned from the API
  state = {
    talks: []
  }

  // execute the query in componentDidMount
  async componentDidMount() {
    try {
      const talkData = await client.query({query: gql(listTalks)})
      console.log('talkData:', talkData)
      this.setState({
        talks: talkData.data.listTalks.items
      })
    } catch (err) {
      console.log('error fetching talks...', err)
    }
  }


  render() {
    return (
      <>
      <div>
        {
           this.state.talks.map((talk, index) => (
            <div key={index}>
              <h3>{talk.speakerName}</h3>
              <h5>{talk.name}</h5>
              <p>{talk.description}</p>
            </div>
          ))

        }
        </div>
      </>
    )
  }
}

export default App

Your data is async, so you need to check if the data has arrived,. simply place if (!this.states.talks) return null; as the first line of your render, the second render when you actually have the data, state.talks will exist. You could also replace null, with loading.. etc.. — Keith
– Keith, Commented Dec 17, 2020 at 20:17

Gurkan Ugurlu · Accepted Answer · 2020-12-17 20:19:44Z

1

I think talkData.data.listTalks.items is equal to undefined and because of that it throws undefined.map is not a function.

this.setState({
    talks: talkData.data.listTalks
  })

Maybe it happens because of that .items property.

answered Dec 17, 2020 at 20:19

Gurkan Ugurlu

4672 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to map object data and render in React?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related