CODEWITHSUNDEEP
reactjsecmascript-6
Mr Matten
Mr Matten

Reputation: 356

.map() doing nothing and casting no error - react

I am programming in Reactjs, es6/2015. So I am trying to .map() over an array, (like I have done sooo many times before). When I print the Array to the console, I get all the correct information, but nothing happens. I can't render the component I want or a simple h1. There is no error in the console or in my web-pack watch. I simply have no clue what's going wrong, the code matches some other code I have written almost down to letter, and the other works. The only real difference between the two is different var names. My code:

show = [{content}, {content}, {content}];

render () {
 return <div className="box">
  {show.map( (item, key) => {
    <MyComponent item={item} key={key} 
                 choice={this.choice.bind(this)} />
  })}
 </div>;
 }

Any help is appreciated.

Upvotes: 4

Views: 443

Answers (1)

Mijamo
Mijamo

Reputation: 3516

You should have return inside the map function, otherwise you just have an empty array.

Your component should be:

render () {
 return <div className="box">
  {show.map( (item, key) => {
    return <MyComponent item={item} key={key} choice=this.choice.bind(this)} />
  })}
 </div>;
 }

Parenthesis are not needed for the return values as far as I know (I never use them and have never encountered any issue).

Upvotes: 4

Related Questions