Rendering an array.map() in React

by

Gosha Arinich is right, you should return your <li> element.
But, nevertheless, you should get nasty red warning in the browser console in this case

Each child in an array or iterator should have a unique “key” prop.

so, you need to add “key” to your list:

this.state.data.map(function(item, i){
  console.log('test');
  return <li key={i}>Test</li>
})

or drop the console.log() and do a beautiful oneliner, using es6 arrow functions:

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

IMPORTANT UPDATE:

The answer above is solving the current problem, but as Sergey mentioned in the comments: using the key depending on the map index is BAD if you want to do some filtering and sorting. In that case use the item.id if id already there, or just generate unique ids for it.

More Related Contents:

  1. How to Protect website code PHP / JS? [closed]
  2. Understanding unique keys for array children in React.js
  3. What do these three dots in React do?
  4. Arrow function without curly braces
  5. Problem in redirecting programmatically to a route in react router v6
  6. What happens when using this.setState multiple times in React component?
  7. React – changing an uncontrolled input
  8. What does npm install –legacy-peer-deps do exactly? When is it recommended / What’s a potential use case?
  9. ReactJS – .JS vs .JSX
  10. Uncaught ReferenceError: React is not defined
  11. Objects are not valid as a React child. If you meant to render a collection of children, use an array instead
  12. reactjs this.refs vs document.getElementById
  13. Using anchor tags in react-router 4
  14. Updating nested data in redux store
  15. React js change child component’s state from parent component
  16. React-router – How to pass data between pages in React?
  17. React: Passing props to function components
  18. How to sort array of objects based on a boolean property?
  19. Does new React Context API trigger re-renders?
  20. Playing sound in React.js
  21. Should we use useCallback in every function handler in React Functional Components
  22. React: Axios Network Error
  23. What is the best way to have a fallback image in NextJS?
  24. Detect scroll direction in React js
  25. React cannot read property map of undefined
  26. How to properly use useHistory () from react-router-dom?
  27. React Error: “SharedArrayBuffer is not defined” in Firefox
  28. Object is not extensible error when creating new attribute for array of objects
  29. How to set iframe content of a react component
  30. How should I alternate componentWillMount()?

Leave a Comment