4

Why am I not able to map through array of objects. I have used this map before but it doesn't seem to be working in this component. Any idea what is wrong?

import React, { Component } from "react";

class Home extends Component {

    constructor(props) {
      super(props);
      this.state = {
         people: [
           {name:"a", age: 21}, 
           {name:"b", age: 22}, 
           {name:"c", age: 23}
         ]
       }
      this.clickListnerHandler = this.clickListnerHandler.bind(this)
     }

     clickListnerHandler(e){
       console.log(this.state.people)
     }

   render(){
     return (
       <div>
           {this.state.people.map((detail, index) => 
              {detail.name}
           )}
         <button
            onClick={this.clickListnerHandler}
            type="button" >Click on me</button>
       </div> 
      )
    }
  }

 export default Home
Improve this question
6
  • 3
    You're not returning anything. Commented Dec 25, 2018 at 3:19
  • Thank you. I have another question- do you know when to write return and when not to return in react map function? I have used this map before without returning and has worked. Commented Dec 25, 2018 at 3:29
  • 2
    I think you might be confusing syntax. You always return when using Array#map or else you're using it wrong (and you'll end up with an array of undefineds). When you write an arrow function like () => something you are implicitly returning without the keyword. When you write () => { something } you will need to explicitly write return because you've created a block. Beware of trying to return object literals though, those need parentheses Commented Dec 25, 2018 at 3:31
  • And map is not a React function, it's javascript Array's function Commented Dec 25, 2018 at 3:36
  • Yea I got confused with syntax. Thank you. reference: https://stackoverflow.com/questions/45189925/map-function-does-not-return-anything-in-reactjs Commented Dec 25, 2018 at 4:51

3 Answers 3

Reset to default
5

Change

   {this.state.people.map((detail, index) => 
          {detail.name}
       )}

To

these days there are two ways to use .map i.e., by using return and without return. You should use ( or { when your code is multi line inside .map function

Without return

  {this.state.people.map(detail=> (
           detail.name
       ))}

With return

   {this.state.people.map(detail=> {
           return detail.name
       })}

Or if it is a single line of code, in which your .map returns, then you don't need to return ( or {. Please take a look at the below code:

    {this.state.people.map(detail=> detail.name)}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

Your use of syntax in the map callback is slightly incorrect, which is causing the map function to not return anything. Consider revising your render() method in the following way:

render(){
     return (<div>
           {this.state.people.map((detail, index) => {
               // detail.name is returned for each item mapped
               return detail.name;
           })}    
         <button
            onClick={this.clickListnerHandler}
            type="button" >Click on me</button>    
       </div>)
    }

Alternatively, you can use the following syntax which is shorthand equivalent to what is shown above:

render(){
     return (<div>
           {this.state.people.map((detail, index) => detail.name)}    
         <button
            onClick={this.clickListnerHandler}
            type="button" >Click on me</button>    
       </div>)
    }
Improve this answer

Comments

1

You need to do a traditional return or remove the wrapping curly braces and do an implicit return, which takes the form (value) => newvalue

Improve this answer

1 Comment

I flaked a little too long, also listen to Hemadri Dasari above

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.