How to read array information in reactions?

Question

I want to encode an array and create list items from it. An error is displayed in the console because my array does not have keys, but only values. So what is the correct operation to read an array?

*// this.props.items = ["cars","streets","houses"];*Wrong. You can't update props var TodoList = React.createClass({ render: function() { var createItem = function(item) { return <li>{item}</li>; }; return <ul>{this.props.items.map(createItem)}</ul>; } }); 

Answer 1

Try as follows:

 this.filterOptions =['Monthly','Weekly','Daily']; <ul> { this.filterOptions.map((filterItem) => { return ( <li key={filterItem}> <span>{filterItem}</span> </li> ); }) } </ul> 

EDIT 1: if there is a duplicate value in the array,

  <ul> { this.filterOptions.map((filterItem,index) => { return ( <li key={index}>//key must be uniq <span>{filterItem}</span> </li> ); }) } </ul> 

Answer 2

Just to clarify, because I see how you use:

  var TodoList = React.createClass({ 

instead

 class TodoList extends React.Component { 

and the question about closing brackets in the comments above: "Are there any missing closing brackets ((filterItem, index)" "

I assume you are not using es6 syntax, so I wanted to indicate that

 { this.filterOptions.map(function(filterItem, index) { return ( <li key={index}> <span>{filterItem}</span> </li> ) }, this) } 

equally

 { this.filterOptions.map((filterItem,index) => { return ( <li key={index}> <span>{filterItem}</span> </li> ); }) }