Using ES6 prototype method map didn’t affect anything in Response

Question

Is there something wrong with my map method?

var App = React.createClass({
   getInitialState(){
     return {
       items:[1,2,3]
     }
   },
   renderItem(){
     return(
       this.state.items.map((item,i))=>
         <li key={i}> {item} </li> 
     )
   },
   render(){
      return(
        <ul>
          {this.renderItem()}
        </ul>
      )
   }
})

Failed to see anything displayed, check console, no errors found.

Answer 1

You have a syntax problem:

this.state.items.map((item,i))=>
                             ^

Remove this closing bracket and place it next to the nearest nearest bracket:

return(
  this.state.items.map((item,i)=>
  <li key={i}> {item} </li> 
))

Answer 2

First of all, you need to get rif extra )in the list of map parameters

this.state.items.map((item,i))=> before this.state.items.map((item,i)=>

Secondly, you need to add another )to close the return statement

var App = React.createClass({
   getInitialState(){
     return {
       items:[1,2,3]
     }
   },
   
   renderItem(){
     return(
       this.state.items.map((item,i)=>
         <li key={i}> {item} </li> 
     )
     )
   },
                                    
   
   render(){
      return(
        <ul>
          {this.renderItem()}
        </ul>
      )
   }
})
  
  


ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

Run codeHide result

Answer 3

, IMO

var App = React.createClass({
   getInitialState(){
   return {
     items:[1,2,3]
   }
   },
   renderItem(item, index){
   return(
      <li key={index}> {item} </li> 
   )
   },
   render(){
      return(
      <ul>
        {this.state.items.map(this.renderItem, this)}
      </ul>
      )
   }
})

Answer 4

renderItem(){
  return(
   this.state.items.map((item,i)=> {
     return <li key={i}> {item} </li>;
   }
  )
},

.map, {} return