CODEWITHSUNDEEP
javascriptreactjs
user1050619
user1050619

Reputation: 20856

Iterate over a object in reactjs

Im trying to iterate over a object in my reactjs but have issues. It does not display any content.

Here is the fiddle -

http://jsfiddle.net/8e039Ltw/

Reactjs code:- 

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        items: {'male':20, 'female':40}      
    }
  }

  render() {
    return (
      <div>
        {Object.entries(this.state.items).map(([key, value])=>{
                    <li>{key}</li>                    
                })
            }

      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

Upvotes: 1

Views: 36

Answers (2)

TBouder
TBouder

Reputation: 2719

You need to return the value :

Object.entries(this.state.items).map(([key, value])=>{
    return <li>{key}</li>                    
})

When you are wrapping your map in { and }, you need to return something. It's a function. When you are using a 'one-line' function, you can omit the return statement :

Object.entries(this.state.items).map(([key, value]) => <li>{key}</li>)

Upvotes: 1

Gangadhar Gandi
Gangadhar Gandi

Reputation: 2252

return is missing in jsx.

Change your render method like below,

render() {
    return (
      <div>
        { 
          Object.entries(this.state.items)
            .map(([key, val]) => {
              return <li key={key}>{key}: {val}</li>
            })
        }
      </div>
    )
}

Upvotes: 1

Related Questions