How to get a value from an array of objects in ReactJS

Question

It is necessary to get values from an array of objects and display them on the screen. Now I get an error in the console: Error: Objects are not valid as a React child (found: object with keys {title}). If you meant to render a collection of children, use an array instead. It also says in the console: The above error occurred in the component. How can this problem be solved?

ListItem.js:

const ListItem = (props) => {
  return (
    <div>
      <h2>{props}</h2>
    </div>
  );
};

export default ListItem;

List.js:

import ListItem from "./ListItem/ListItem";

const listObj = [
  {
    title: "House 1",
  },
  {
    title: "House 2",
  },
  {
    title: "House 3",
  },
];

function HouseList() {
  return listObj.map((house, index) => {
    return <ListItem key={index} title={house.title} />;
  });
}

const List = () => {
  return (
    <div style={{ width: "50%" }}>
      <HouseList />
    </div>
  );
};

export default List;

Probably a typo props.title instead of props in ListItem JSX. — DecPK
– DecPK, Commented Aug 16, 2022 at 10:05
In your example, it would not make a lot of sense, as ListItem has a single prop (apart from key), so you could simply do: <h2>{props.title}</h2>. Anyway, if you have to display all the props and none of your props values is an object, you simply do the same thing you have done for HouseList: {Object.values(props).map(prop => <h2>prop</h2>)} — secan
– secan, Commented Aug 16, 2022 at 10:11

Erencan · Accepted Answer · 2022-08-16 10:16:34Z

2

you should use {props.title} instead of only props. Here is the codesandbox link

The props would be everything so you should give the absolute object path.

props={title:"React", version:18} so if you call just {props}, you will get {title:"React", version:18} so you should define {props.title} {props.version}

Plus, you can level up your knowledge about props just by reading this React official doc https://reactjs.org/docs/components-and-props.html

const ListItem = (props) => {
  return (
    <div>
      <h2>{props.title}</h2>
    </div>
  );
};

edited Aug 16, 2022 at 10:16

answered Aug 16, 2022 at 10:07

Erencan

2202 silver badges7 bronze badges

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

Comments

Deodeep kunj · Accepted Answer · 2022-08-16 10:19:56Z

-1

Simply we can use :-

JSON.parse(JSON.stringify(obj))

answered Aug 16, 2022 at 10:19

Deodeep kunj

12 bronze badges

1 Comment

Emil Karlsson Over a year ago

I also thought that JSON.stringify(obj) was the solution at first, but if you look closer at the issue you'll notice that it's actually about props being used directly, instead of using props.title. Your answer is unfortunately incorrect.

Collectives™ on Stack Overflow

How to get a value from an array of objects in ReactJS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related