Trouble targeting second array layer in React component
12 replies
Last updated: Jul 5, 2022
S
Hi all,I'm having trouble targeting the second array layer : This is what I have at the moment
Now I can do
this shows me the products inside the collection but my goal is to fetch the title of the products in the collection so one would say it should be like this
but this wont work as it returns undefined. I have a feeling there needs a second mapping for this?
This is the data I want to target
const Home = ({ product, collection }) => {
return (
<>
<Collection collection={collection} />
{(collection ?? []).map((collection) => (
<div key={collection.title}>
{console.log(collection.products)}</div>
))}
</>
);
};{console.log(collection.products)}{console.log(collection.products.title)}This is the data I want to target
Jul 4, 2022, 7:11 AM
S
This is beside Sanity, but you need to loop through the array of products to get each products title value.
e.g
e.g
collection.products.map(product => product.title) // Will return a list of every title for each product
Jul 4, 2022, 8:19 AM
S
If you change your examle to
collection.products[0].titlethen you will get the title for the first product
Jul 4, 2022, 8:20 AM
S
Hi Sindre,I know it is outside of sanity but I'm having a hard time to find answers to my questions otherwise. I'm a self learning developer thats why I try to have good input from the people here.
So thank you for interacting with me and helping me throught this.
How would this code you suggest work in this case?
I have tried this before
when you try to hit title it breaks
So thank you for interacting with me and helping me throught this.
How would this code you suggest work in this case?
collection.products.map(product => product.title)
collection.products[0].title
Jul 4, 2022, 8:28 AM
S
Hi Sadiki,Don’t worry, we all started at some point
🙂Regarding your question, you need to map over your products and extract the titles that way.
But I would recommend setting meaningful variable names in your code, so your code can be understood more readily (by yourself and others).
Example:
when it comes to mapping to get the titles, you could do that inside of your
Hope that will help you with your question
🙂
🙂Regarding your question, you need to map over your products and extract the titles that way.
But I would recommend setting meaningful variable names in your code, so your code can be understood more readily (by yourself and others).
Example:
const allProducts = collection.products || []; const productTitles = allProducts.map(product => product.title);
<Collection/>Component, if you are displaying the data you stored in there.If you want to display it within your code here, I would recommend going about it like this:
const Home = ({ product, collection }) => {
return (
<>
<Collection collection={collection} />
{(collection ?? []).map((collectionItem) => (
<div key={collectionItem.title}>
{const allProducts=collection.products || [];
allProducts.map(product => (
<p key={product._id}>{product.title}</p>
}
</div>
))}
</>
);
};🙂
Jul 4, 2022, 8:57 AM
S
Thank you Saskia,I'm using the component to build the outcome. Let me show you what works and what dont at this point.
In my index i have a simple component like this
now inside that component i have this
this logs the title of the first product in the first collection. this works fine.
Now I want to wrap it in a map so I can display all product titles that are inside the collections.
this dosnt work , I can also say I just want all the products inside the first collection like this
this also dosnt work it looks very simple but somehow Im having trouble picking that data
In my index i have a simple component like this
<Collection collectiondata={collectiondata} />{console.log(collectiondata[0].products[0].title)}Now I want to wrap it in a map so I can display all product titles that are inside the collections.
{(collectiondata ?? []).map((collectiondata) => (
<div>
{console.log(collectiondata.products.title)}
</div>
))}{console.log(collectiondata[0].products.title)}Jul 4, 2022, 9:13 AM
S
Have you tried my map function from my previous answer?
{(collection ?? []).map((collectionItem) => (
<div key={collectionItem.title}>
{const allProducts=collection.products || [];
allProducts.map(product => (
<p key={product._id}>{product.title}</p>
}
</div>
))}Jul 4, 2022, 12:22 PM
S
But I would split the 2 map functions: the
collectiondatain
homeand the
allProductsin
collection
Jul 4, 2022, 12:23 PM
S
I found the problem to this. I had 2 empty collections that causes the problem. When I removed the 2 empty collections entirely it solved the errors and projected it as it should. Your method works but that seperates the products from the collection so it makes it harder to link the products to a collection. My idea was to have it all dynamicly so if there is a change somehwere or something has been added it will all dynamicly change. Thanks for looking at my code and helping me out I really appreciate it !
Jul 4, 2022, 1:21 PM
S
Wonderful you found it.If I may, maybe it would be good to setup a validation in your collection array, so it will throw a warning and keeps editors from publishing
🙂With the dynamic rendering, this still would be the case if you map your second array in the component, but it also makes your code more manageable long term.
🙂With the dynamic rendering, this still would be the case if you map your second array in the component, but it also makes your code more manageable long term.
Jul 4, 2022, 1:27 PM
S
Do you have a example for how to set up the warning properly?
Jul 4, 2022, 1:34 PM
S
Sure!As described
here , the field (array) in your Sanity Studio should look something like this:
here , the field (array) in your Sanity Studio should look something like this:
{
title: 'Title',
name: 'array',
type: 'array',
validation: Rule => Rule.max(50).warning('Shorter lists are usually better'),
...}Jul 5, 2022, 11:18 AM
S
Thank you Saskia !
Jul 5, 2022, 12:01 PM
Sanity– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.