score:1
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>
<p classname="space_name">
{outerobj.space_name}
</p>
{
outerobj.applicants.map((obj,i) => {
return (
<div>
<div>
{renderdetail(obj)}
</div>
</div>
)
})}
</div>
)}
)}
</div>
}
</div>
score:0
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:
const fn1 = () => {
return { num: 1 }
}
const fn2 = () => ({
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>
<p classname="space_name">
{outerobj.space_name}
</p>
{outerobj.applicants.map((obj,i) => (
<div>
<div>
{renderdetail(obj)}
</div>
</div>
))}
</div>
))}
</div>
}
</div>
score:2
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>
<p classname="space_name">
{outerobj.space_name}
</p>
{outerobj.applicants.map((obj,i) => {
return (
<div>
<div>
{renderdetail(obj)}
</div>
</div>)
})}
</div>
})}
</div>}
</div>
Source: stackoverflow.com
Related Query
- Map did not render content
- Render Content Dynamically from an array map function in React Native
- Text content did not match. Warning in React 16
- Warning: Text content did not match. Server: "I'm out" Client: "I'm in" div
- How to fix `Warning: Text content did not match. Server: "Some Data" Client: "Loading..."`
- Is there any way to avoid "Text content did not match" warning in SSR with React?
- ReactJS: setTimeout not working inside map to render component
- How can I set a global context in Next.js without getting a "Text content did not match" error?
- React-loadable warning text content did not match
- Why child component's render is called when props did not change?
- Array of object iterating through map to render a component key not updating in props
- Map function not return item in render reactjs?
- Why does moving the array map of props outside the render function not work in React?
- React Router history.push() changed url but did not rendered components content
- Reactjs map function does not render the component
- Render component using a function did not work?
- Warning: Text content did not match. Server: "0" Client: "1"
- Nextjs not render as expected and throw "Warning Prop `style` did not match." when using inline style
- Suspense is not loading content after render reactjs
- Component returned in map function will not render
- how did not zoom content on printing when browser zoom?
- Map Filter in React. Objects are not valid as a React child. If you meant to render a collection of children, use an array instead
- n-th child selector not working in react map render function
- Why carousel does not render images? What is wrong with nested map in React?
- ReactJs - Ant design Tabs Card does not render content
- React js: elements returned by map does not render
- can not render api data with map
- Uncaught TypeError: _this.props.data.map is not a function, Map error to render Component
- component does not render inside map
- React content rendering based on map output not working
More Query from same tag
- Why is the default value of the useState hooks undefined?
- onClickHandler sometimes work, sometimes not - React
- How can I access the ref of the BaseComponent or any level of the components?
- I am trying to map over an array and add comma's in between each instance except for the last
- Using '@' import for jest testing
- Error when calling API in Front using React
- React : Unable to set context state in app.js using useContext hook
- React Native: XCode: Build failed with error "EMFILE: too many open files, watch"
- React use different imported Component based on a prop
- How to change StaticRouter's location prop using the <Link> tag in Server Side Rendering with React-Router
- React cannot read property 'map' of undefined on component
- React apply style to element using a wrapper
- React App Firebase Missing or insufficient permissions error when importing data to firestore
- Getting Error "React.createElement: type is invalid -- expected a string" when using React Router and external component that imports other Components
- React native background service
- When Table ellipsis attr is assigned `true` will show black text box. How can I change styled for textbox background color?
- react how to integrate multiple types of search functionalities
- Aws Amplify Using Multiple Cognito User Pools in One GraphQL Api
- Font Awesome 6 What is the right way to use it in react
- Material UI How can i get meunItem key and value when touch up
- Automatic popup with Auth0-react instead of login button
- React web navigation switch to Burger Menu
- React: Unable to use useContext hook
- How to change image source using state variable with React.js
- How to add different background colours for each droppable element
- 2 function calls into onChange - ReactJS
- Why is this bar chart using chart.js not rendering in react.js?
- Register files for cache in PWA with React
- I am able to move into next step in antd step form even though i have added validation in react.js
- How to test React components inside react-responsive tags