react unexpected token in using map of es6

Question

I couldn't find what is wrong, can't see which line has problem in jsbin. http://jsbin.com/bewigabomi/edit?js,console,output

class HelloWorldComponent extends React.Component {

  constructor(){
    super()
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(e){
    console.log(e.target.value)
  }

  render() {
    const data = {
      "fruits":[
        {"name":"banana","value":true},
        {"name":"watermelon","value":false},
        {"name":"lemon","value":true},
      ]
    }
    return (      
        {data.fruits.map(obj => 
         <div>
           <label>{obj.name}</label>
           <input onChange={(e) => this.handleChange(e)} type="checkbox" defaultChecked={obj.true}/>
         </div>
         )}
    );
  }
}

React.render(
  <HelloWorldComponent/>,
  document.getElementById('react_example')
);

Tried for more than 15min, couldn't spot the problem, need help!

Ray · Accepted Answer · 2017-03-07 12:54:04Z

1

Moved the constant outside of the class and create a _drawlayout method instead and it worked.

const data = {
  "fruits":[
    {"name":"banana","value":true},
    {"name":"watermelon","value":false},
    {"name":"lemon","value":true},
  ]
}

class HelloWorldComponent extends React.Component {

  constructor(){
    super()
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(e){
    console.log(e.target.value)
  }

  _drawLayout() {
    return data.fruits.map(obj => {
      return(
        <div>
          <label>{obj.name}</label>
          <input onChange={e => this.handleChange(e)} type="checkbox" defaultChecked={obj.true}/> 
        </div>
      )
    })
  }

  render() {
    return (      
        <div>
          {this._drawLayout()}
        </div>
    );
  }
}

React.render(
  <HelloWorldComponent name="Joe Schmoe"/>,
  document.getElementById('react_example')
);

Edit: The map() method needs to have a return.

answered Mar 7, 2017 at 12:54

Ray

9,7743 gold badges31 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Giala Jefferson Over a year ago

this is so confusing. Look at Andrew's answer.

Ray Over a year ago

It is a little bit confusing at first I agree. But the main objective of react is to create reusable code.

Andrii Starusiev · Accepted Answer · 2017-03-07 12:19:40Z

0

You need to wrap your map function like

return (
    <div>{data.fruits.map(obj => (
            <div>
                <label>{obj.name}</label>
                <input onChange={(e) => this.handleChange(e)} type="checkbox" defaultChecked={obj.true} />
            </div>
        )
    )}</div>
);

You can return single component but map return array;

edited Mar 7, 2017 at 12:19

answered Mar 7, 2017 at 11:59

Andrii Starusiev

7,7942 gold badges31 silver badges40 bronze badges

2 Comments

Andrii Starusiev Over a year ago

After map your component will be like

return (                <div>              </div>          <div>          </div>           <div>          </div>          <div>          </div>     )

etc. But you can't return 3 divs on high level. It all must be wrapped into one wrapper.

Giala Jefferson Over a year ago

ok I got it. I often see people always wrap their content after return line.

Facundo La Rocca · Accepted Answer · 2017-03-07 12:33:08Z

0

I think you're missing a left parenthesis, and also map must have a return clause:

return (      
    {data.fruits.map(obj => 
     //Your are missing this parenthesis and the return instruction
     return (
       <div>
         <label>{obj.name}</label>
         <input onChange={(e) => this.handleChange(e)} type="checkbox" defaultChecked={obj.true}/>
       </div>
     )}
);

answered Mar 7, 2017 at 12:33

Facundo La Rocca

3,8862 gold badges30 silver badges50 bronze badges

Collectives™ on Stack Overflow

react unexpected token in using map of es6

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related