Mapping Errors
Unanswered
Orangetailed potter wasp posted this in #help-forum
Orangetailed potter waspOP
When i try to map items from a string[] of items from firestore , only the first item gets its tailwind styling applied, the others don't.
app-index.js:31 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
app-index.js:31 Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>.
app-index.js:31 Warning: validateDOMNesting(...): <ul> cannot appear as a descendant of <p>.
app-index.js:31 Warning: Each child in a list should have a unique "key" prop.
All these errors shoudn't occur
app-index.js:31 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
app-index.js:31 Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>.
app-index.js:31 Warning: validateDOMNesting(...): <ul> cannot appear as a descendant of <p>.
app-index.js:31 Warning: Each child in a list should have a unique "key" prop.
All these errors shoudn't occur
{order && productInfo && (
<ul>
{productInfo.map((product, index) => (
<li className="flex mt-5" key={index}>
<div>
<img
src={product.mainImage}
className="w-20"
alt={product.name}
/>
</div>
<div className="mx-auto">
<p className="text-3xl">{product.name}</p>
<p className="text-2xl">{product.price} лв.</p>
</div>
</li>
))}
</ul>
)}
1 Reply
Orangetailed potter waspOP