CODEWITHSUNDEEP
javascriptreactjs
Alex Yong
Alex Yong

Reputation: 7645

Failed to render checkbox with react

What's wrong with my code? Can't find any meaningful error description, stuck for 20 min. 

    class HelloWidget extends React.Component {
      constructor(props) {
        super(props);        
      }

      renderResult(data){

         return(
           data.fruits.map(obj => 
           <select>
             <label>{obj.name}</label>
             <input type="checkbox" defaultChecked={obj.value} />
           </select>
           )
         )
      }

      render() {
        //assume data came from API
         cosnt data = {
            "fruits": [
            {"id":1,"name":"Durian","value":true},
            {"id":2,"name":"Banana","value":true},
            {"id":3,"name":"Mango","value":false}
          ]
         }

         return (<div>{this.renderResult(data)}</div>)
      }
    }

Created a fiddle for debugging https://jsfiddle.net/w9r6Lqvh/

Upvotes: 0

Views: 41

Answers (1)

Thomas Sojka
Thomas Sojka

Reputation: 233

There are two small issues in your code:

  1. Typo: Line 28 cosnt -> const
  2. Remove Space: Line 38 < HelloWidget / > -> < HelloWidget />

Updated fiddle: https://jsfiddle.net/w9r6Lqvh/1/

Upvotes: 1

Related Questions