How to Render a Collection of Children Using Array

Objects are not valid as a React child. If you meant to render a collection of children, use an array instead

Your data homes is an array, so you would have to iterate over the array using Array.prototype.map() for it to work.

return (
<div className="col">
<h1>Mi Casa</h1>
<p>This is my house y'all!</p>
{homes.map(home => <div>{home.name}</div>)}
</div>
);

ReactNative - render a collection of children using array error when rendering userInfo in FBSDK?

Try this

AccessToken.getCurrentAccessToken().then((data) => {
const { accessToken } = data;

fetch('https://graph.facebook.com/v2.5/me?fields=email,name,friends&access_token=' + accessToken)
.then((response) => response.json())
.then((json) => {
// Some user object has been set up somewhere, build that user here
const userID = json.id;

//setLoggedIn(true);
setFbUserInfo({data: userID});
})
.catch(() => {
reject('ERROR GETTING DATA FROM FACEBOOK')
});
});

React child : If you meant to render a collection of children, use an array instead

Change {item} to {item.name} like this

 const MenuTags = [
{ name: 'home', redirectTo: '/' },
{ name: 'about', redirectTo: '../about' },
{ name: 'not dropdown', redirectTo: '../dashboard' },
{ name: 'not dropdown', redirectTo: '../dashboard/about' },
];

{MenuTags.map(item => (
<NavLi
key={item.name}
redirectTo={item.redirectTo}
onClick={() => onUpdateVisibility(item)}
>

**** Change here ****
{item.name}
</NavLi>
))}

Error message : If you meant to render a collection of children, use an array instead React JS

In Navbar component: I would think the JSON.stringify() for the key in your map function is synchronous, but try putting the index as the key to see if it resolves it.

Objects are not valid as a React child. If you meant to render a collection of children, use an array instead. How to return it?

i guess {menu.props.options[0]} is an object. You should only display the relevant property of this object, with a primitive type (a string, for example) such as menu.props?.options?.[0]?.label

Objects are not valid as a React child, render a collection of children, use an array instead

<td>{movie.genre}</td>

Genre is an object. You can't render it.

Change it to {movie.genre.name} and it should work.

Objects are not valid as a React child. If you meant to render a collection of children, use an array instead. React

reactjs error : If you meant to render a collection of children,use an array instead

The following line <span>{role.cmsmenuschild.name}</span> is incorrect as csmenuschild is an array and we don't know from which child to get the name. You can get it like this
<span>{role.cmsmenuschild[0].name}</span> or <span>{role.cmsmenuschild[1].name}</span>.

However, this is not a good approach. You are statically accessing the csmenuschild array. There can be more than two children in this array. Hence, you should map over it as you are mapping over MenuRoles



Related Topics



Leave a reply



Submit