Render an array of Objects in ReactJs

Question

I am trying to go through object properties (Name for this example) and list them within easy loop in function. I have found some pretty awkward way of doing this but it doesn't seem right.

Here is what i got:

const ItemsToSell = [{"Name":"Cup","Price":"99.99"},{"Name":"IPhone","Price":"99.99"},{
"Name":"Pen","Price":"99.99"}]

function ListItem(props) {
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const a = props.numbers;
  return (
    <ul>
      {a.map((number) =>
        <ListItem  value={ItemsToSell[number].Name} />
      )}
    </ul>
  );
}

const numbers = [0,1, 2];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  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>

Is there a better way to do this? I simply need a loop to go through array of objects, list needed properties and create one of many html nodes.

Shubham Khatri · Accepted Answer · 2017-07-13 11:10:48Z

2

You can simply map over ItemsToSell array

const ItemsToSell = [{"Name":"Cup","Price":"99.99"},{"Name":"IPhone","Price":"99.99"},{
"Name":"Pen","Price":"99.99"}]

function ListItem(props) {
  return <li>{props.value}</li>;
}

function NumberList(props) {
  return (
    <ul>
      {ItemsToSell.map((obj, index) =>
        <ListItem  key={index} value={obj.Name} />
      )}
    </ul>
  );
}

ReactDOM.render(
  <NumberList  />,
  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>

answered Jul 13, 2017 at 11:10

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kind user · Accepted Answer · 2017-07-13 11:14:33Z

1

Why don't you iterate over ItemsToSell array? You don't have to add yet another one.

Note: Include key property while looping the elements, else you will receive an error.

const ItemsToSell = [{"Name":"Cup","Price":"99.99"},{"Name":"IPhone","Price":"99.99"},{
"Name":"Pen","Price":"99.99"}]

function ListItem(props) {
  return <li>{props.value}</li>;
}

function NumberList(props) {
  return (
    <ul>
      {ItemsToSell.map((elem, index) =>
        <ListItem value={elem.Name} key={index} />
      )}
    </ul>
  );
}

ReactDOM.render(
  <NumberList />,
  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>

edited Jul 13, 2017 at 11:14

answered Jul 13, 2017 at 11:12

kind user

42k8 gold badges69 silver badges78 bronze badges

1 Comment

AESTHETICS Over a year ago

Thanks a lot! This is exactly what i needed.

Collectives™ on Stack Overflow

Render an array of Objects in ReactJs

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related