Looping Objects inside parent Object in React

Question

I'm really stuck with this issue, it looks very simple but I just cannot access childs of a parent Object, please someone assist. The picture below is the console log:

When I render this I don't see the results

const listItems = this.state.list.map((item, index) => <p>{item.title}</p>);

Of course when I try this.state.list.map((item, index) => <p>{item}</p>); I got the error bellow:

Objects are not valid as a React child

The main function:

componentDidMount = () => {
    fire
        .database()
        .ref(`/feed/`)
        .on('value', snapshot => {
            var obj = snapshot.val();
            var list = [];
            for (let a in obj) {
                list.push(obj[a]);
            }
            console.log(list);
            this.setState({
                list: list,
                loading: false
            });
        });
};

A live session can be found here (Home.js) https://codesandbox.io/live/DR7WzY

EDIT : my last attempt

        for (let a in obj) {
            for (let b in obj[a]) {
                console.log(b);
            }
        }

But it's empty!!

Matt Aft · Accepted Answer · 2018-10-09 23:55:29Z

1

item.title works because it's a string. You can't pass an object, if you want to view the object then you can just stringify it:

this.state.list.map((item, index) => <p>{JSON.stringify(item)}</p>);

Since you have nested objects you would need to do something like:

this.state.list.map((item, index) =>
  Object.values(item).map(nestedItem => 
    <p>{JSON.stringify(nestedItem)}</p>));

edited Oct 9, 2018 at 23:55

answered Oct 9, 2018 at 23:45

Matt Aft

8,9663 gold badges28 silver badges38 bronze badges

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

4 Comments

user7319004 Over a year ago

well that's a great suggestion now I got this in my view : {"-LOQ780BQvgYVkbLnkpE":{"description":"TEST","picture":"TEST","title":"TEST","user":"TEST"},"-LOQ7AWEEYVcjRQV-kDC":{"description":"TESTPOST","picture":"POST","title":"POST","user":"TEST"}}

Matt Aft Over a year ago

Do you have no way of knowing the keys?

user7319004 Over a year ago

Definitely not, it's the uid of users @matt-aft

Matt Aft Over a year ago

try what i posted above, it will grab the values of your nested objects

Collectives™ on Stack Overflow

Looping Objects inside parent Object in React

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related