Brave Search

How to render an array of objects in React?

stackoverflow.com › questions › 41374572 › how-to-render-an-array-of-objects-in-react

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>
    );
  }

Answer from Shubham Khatri on Stack Overflow

React

react.dev › learn › rendering-lists

Rendering Lists – React

You will often need to show several instances of the same component using different data when building interfaces: from lists of comments to galleries of profile images. In these situations, you can store that data in JavaScript objects and arrays and use methods like map() and filter() to render lists of components from them.

Stack Overflow

stackoverflow.com › questions › 41374572 › how-to-render-an-array-of-objects-in-react

How to render an array of objects in React?

Top answer

1 of 7

189

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>
    );
  }

2 of 7

https://facebook.github.io/react/docs/jsx-in-depth.html#javascript-expressions

You can pass any JavaScript expression as children, by enclosing it within {}. For example, these expressions are equivalent:
<MyComponent>foo</MyComponent>

<MyComponent>{'foo'}</MyComponent>
This is often useful for rendering a list of JSX expressions of arbitrary length. For example, this renders an HTML list:
function Item(props) {
  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    <ul>
      {todos.map((message) => <Item key={message} message={message} />)}
    </ul>
  );
}

class First extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [{name: 'bob'}, {name: 'chris'}],
    };
  }
  
  render() {
    return (
      <ul>
        {this.state.data.map(d => <li key={d.name}>{d.name}</li>)}
      </ul>
    );
  }
}

ReactDOM.render(
  <First />,
  document.getElementById('root')
);

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

Discussions

Using anything rather than .map to render lists in JSX?

I've used for loops cos state held an array, even experimented with reduce to create a single consolidated code block of lists, but nothing else is as simple and effective as using map. More on reddit.com

r/reactjs

February 7, 2024

How to re-render a map loop in React?

It looks like there's two problems: You're mutating the existing data array by calling Array.splice() It also doesn't look like that data array is in React state, and you're not calling any form of setState(). React requires that you call some form of setState() to cause a re-render. I'd recommend going through the React beta docs to understand how to use state in components and update it: https://beta.reactjs.org/learn/state-a-components-memory https://beta.reactjs.org/learn/updating-arrays-in-state You might also want to read my post A (Mostly) Complete Guide to React Rendering Behavior to better understand how React rendering works. More on reddit.com

r/reactjs

October 27, 2022

How do you render bullet points in react.js? Which syntax should I use? Which blogs and tutorials teaches me how to render bullet points in React.js?

Render a list? I'm not sure if there's more to this question. Assuming you're using JSX you be able to just make your render function... render() { return (

Coffee
Tea
Milk

) } To be honest you're going to have a painful time if you can't get that. Just follow this tutorial if you're starting fresh. More on reddit.com

r/reactjs

November 29, 2016

How to Render a List of Objects in React ?

Good video. What if I want to render the data such that each list object renders in a simple box that contains the object data rather than a bullet point list?

Videos