The closest link I ve read for the question I m trying to solve is this one.
Map through an array inside an object
I have an object with a prop called clients. The data type of clients is an array.
I get the error
Error: Objects are not valid as a React child (found: object with keys {type, props, key, ref, __k, __, __b, __e, __d, __c, __h, constructor, __v, __source, __self}). If you meant to render a collection of children, use an array instead.`
Intellisense tells my the type is an array of objects
)
I m very confused about this one, I don t usually have this kind of trouble. I m using Preact and Compat, which may be causing some further complications.
- Node: v18.13.0
- NPM: 8.19.3
- "preact": "^10.15.0"
- "@preact/compat": "^17.1.2"
Here s the code...
export const clientData = {
clients: [
{
name: comapany1 ,
logo: ./src/assets/images/company1.png ,
},
{
name: company2 ,
logo: ./images/company2.png ,
},
{
name: company3 ,
logo: ./images/company3.png ,
},
{
name: company4 ,
logo: ./images/company4.png ,
},
{
name: company5 ,
logo: ./images/company5.png ,
},
],
};
Whenever I try to map over this I get an error. I have tried the following:
clientData?.clients?.map(client => {
return (
<div class="mt-12 grid grid-cols-2 sm:grid-cols-5 md:grid-cols-5">
<div class="p-4 grayscale transition duration-200 hover:grayscale-0">
<img src={client.logo} class="h-32 w-auto mx-auto" loading="lazy" alt="client logo" width="" height="" />
<p class= text-center pt-5 >{client.name}</p>
</div>
</div>
)
})
I ve also tried
const { clients } = clientData;
{
clients.map(client => {
// ...
}
}