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
Dacre Denny
  • 29,664
  • 5
  • 45
  • 65
Deke
  • 4,451
  • 4
  • 44
  • 65
  • 3
    You're not returning anything. – Andrew Li Dec 25 '18 at 03: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. – Deke Dec 25 '18 at 03: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 – Andrew Li Dec 25 '18 at 03:31
  • And `map` is not a React function, it's javascript Array's function – Marson Mao Dec 25 '18 at 03:36
  • Yea I got confused with syntax. Thank you. reference: `https://stackoverflow.com/questions/45189925/map-function-does-not-return-anything-in-reactjs` – Deke Dec 25 '18 at 04:51

3 Answers3

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)}
Sebastian
  • 1,321
  • 9
  • 21
Hemadri Dasari
  • 32,666
  • 37
  • 119
  • 162
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>)
    }
Dacre Denny
  • 29,664
  • 5
  • 45
  • 65
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

SeanB
  • 21
  • 2