CODEWITHSUNDEEP
javascriptreactjsobjectdictionaryrender
Roi
Roi

Reputation: 1003

React loop array and rende object

I'm trying to loop over an array with the map function in React.

when I do:

render() {
    return (
      <div>
        {this.props.components.map((vitamin) => {
         <p>{vitamin.ID}</p>
       })}
     </div>
   )
}

Nothing gets rendered. But if I try to console.log inside the map function the object key like:

render() {
    return (
      <div>
        {this.props.components.map((vitamin) => {
         console.log(vitamin.ID)
       })}
     </div>
   )
}

The vitamin id is printed in the console. So I know there's an object, but why does it not appear in my React component?

Upvotes: 0

Views: 187

Answers (1)

Conan
Conan

Reputation: 690

you have to return the component/object inside each iteration of map:

render() {
    return (
      <div>
        {this.props.components.map((vitamin) => {
         return(
           <p>{vitamin.ID}</p>
         )
       })}
     </div>
   )
}

Upvotes: 2

Related Questions