I want to loop an array and create list items out of it. In the console,it is showing mistake is thrown, because my array has no keys but only values. So What is the right operation to read out 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>;
}
});

I want to loop an array and create list items out of it. In the console,it is showing mistake is thrown, because my array has no keys but only values. So What is the right operation to read out 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>;
}
});

• javascript
• reactjs

Share Improve this question Follow edited Mar 8, 2016 at 13:25 Ved 12.1k55 gold badges4545 silver badges6161 bronze badges asked Mar 8, 2016 at 6:47 user1477955user1477955 1,67088 gold badges2424 silver badges3737 bronze badges 1

• 2 keys are required in your <li>s and they can be anything but should be unique for each child. stackoverflow./a/28329550/1642219 – Udit Bhardwaj Commented Mar 8, 2016 at 7:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

Try this way:

this.filterOptions =['Monthly','Weekly','Daily'];

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

EDIT 1: If there is duplicate value in array,

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

Just to clarify because i see u use:

  var TodoList = React.createClass({

instead of

class TodoList extends React.Component {

and the question about the closing brackets in the ments above: "Is there a missing closing brackets ((filterItem,index)""

i assume you are not using the es6 syntax, so i wanted to point out that

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

equals

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