How to render an array of objects in React?

by

You can do it in two ways:

First:

render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

    return (
      <div>
      {listItems }
      </div>
    );
  }

Second: Directly write the map function in the return

render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    return (
      <div>
      {data.map(function(d, idx){
         return (<li key={idx}>{d.name}</li>)
       })}
      </div>
    );
  }

More Related Contents:

  1. React-router URLs don’t work when refreshing or writing manually
  2. Programmatically Navigate using react-router
  3. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
  4. Passing custom props to router component in react-router v4
  5. Nested routes with react router v4 / v5
  6. react-router – pass props to handler component
  7. How to implement authenticated routes in React Router 4?
  8. How to use Redirect in version 5 of react-router-dom of Reactjs
  9. react router v6 navigate outside of components
  10. react-router scroll to top on every transition
  11. React-Router: No Not Found Route?
  12. Problem in redirecting programmatically to a route in react router v6
  13. Intercept/handle browser’s back button in React-router?
  14. How to make a shared state between two react components?
  15. React Routing works in local machine but not Heroku
  16. Multiple path names for a same component in React Router
  17. React doesn’t reload component data on route param change or query change
  18. Get path params in react-router v4
  19. React react-router-dom pass props to component
  20. Active link with React-Router?
  21. Client Routing (using react-router) and Server-Side Routing
  22. Using anchor tags in react-router 4
  23. How to hide navbar in login page in react router
  24. How to sync Redux state and url hash tag params
  25. React-router: How to manually invoke Link?
  26. React-router – How to pass data between pages in React?
  27. Matched leaf route at location “/” does not have an element
  28. How to create a protected route with react-router-dom?
  29. React: ‘Redirect’ is not exported from ‘react-router-dom’
  30. On React Router, how to stay logged in state even page refresh?

Leave a Comment