Map Did Not Render Content
{!props.isLoading &&
{normalizedData.map((outerObj,index) => { {
Solution 1:
When you need to return multiple elements in a map you need to wrap all the elements in a single div in a return statement. So change the P tag to be in the return div.
<div>
{!props.isLoading && <div>
{normalizedData.map((outerObj,index) => {
return(
<div><pclassName="space_name">
{outerObj.space_name}
</p>
{outerObj.applicants.map((obj,i) => {
return (
<div><div>
{renderDetail(obj)}
</div></div>)
})}
</div>
})}
</div>}
</div>Solution 2:
Changes:
1. We can't return more that one element so wrap the all the elements inside 1st map in a div.
2. Use return inside 1st map.
3. Wrapping a p tag (any html element) inside {} is not required.
write it like this:
<div>
{!props.isLoading && <div>
{normalizedData.map((outerObj,index) => {
return (
<div><pclassName="space_name">
{outerObj.space_name}
</p>
{
outerObj.applicants.map((obj,i) => {
return (
<div><div>
{renderDetail(obj)}
</div></div>
)
})}
</div>
)}
)}
</div>
}
</div>Solution 3:
The problem is the way how you are using arrow functions. When you wrap it with {}, you need to return something. However when you wrap jsx with () it will return the content object directly, for example:
constfn1 = () => {
return { num: 1 }
}
constfn2 = () => ({
num: 2
})
fn1(); // { num: 1 }fn2(); // { num: 2 }Therefore you can rewrite your code like this:
<div>
{!props.isLoading &&
<div>
{normalizedData.map((outerObj,index) => (
<div><pclassName="space_name">
{outerObj.space_name}
</p>
{outerObj.applicants.map((obj,i) => (
<div><div>
{renderDetail(obj)}
</div></div>
))}
</div>
))}
</div>
}
</div>
Post a Comment for "Map Did Not Render Content"