score:1
Accepted answer
you don't need to separate header
and description
in two different variables.
so try something like this:-
return (
<div classname="selection">
{data.oswiecim?.map((item) => (
<>
<h1>{item.header}</h1>
{item.description?.map((description) => (
<p>{description}</p>
))}
</>
))}
</div>
);
live demo
score:1
replace the setdata(data);
with following. it will just give the array you need to iterate,
setdata(data.oswiecim);
remove the following code,
const headers = []
const descriptions = []
for (const item of data.oswiecim) {
headers.push(item.header)
descriptions.push(item.description)
}
replace return statement with following,
<div classname="selection">
{data &&
data.map(item => (
<>
<div>{item.header}</div>
{item.description &&
item.description.map(descriptionitem => <p>{descriptionitem}</p>)}
</>
))}
</div>
Source: stackoverflow.com
Related Query
- How to make correct loop of JSON in React
- How to map an object's keys to make JSON easier to handle in React
- How to make a loop request with React using Axios?
- How to make a react table whose rows and columns come from a JSON object
- How to make a list from json object using React
- How can I use a loop to make this React component more DRY?
- How can I loop over a JSON object in React
- How to fetch Json nested and Make it Array of object in React
- how to make a double json external call in react
- How to make list of checkboxes controlled in loop in react
- React how to make POST request in For Loop
- how to parse loop for json in react js
- how to loop throgh array of object from axios json respone in react js and set them in div?
- How to make a "on/off" button inside a loop react 17
- How to make asynchronous api calls in loop and conditional statements in react js?
- how to make a dynamic text show the correct sentence in react when deleting a component (custom html element)
- How to loop through json nested objects in react js
- How to Loop Through Firebase JSON in React
- How can I make use of Error boundaries in functional React components?
- How to make React CSS import component-scoped?
- How to make a shared state between two react components?
- How to make React app preview on mobile?
- How do you make the ListHeaderComponent of a React Native FlatList sticky?
- How to make a Material UI react Button act as a react-router-dom Link?
- React TypeScript 16.8 How to make useEffect() async
- How to make the whole Card component clickable in Material UI using React JS?
- How can I parse through local JSON file in React js?
- How to loop over a number in React inside JSX
- How to make vs code autocomplete React component's prop types?
- How to make sure a React state using useState() hook has been updated?
More Query from same tag
- All SVGs to be the same size
- Auth0 authentication with Cypress
- React/Redux Reset State Upon Route Change
- jest.mock invariant variable access: __extends
- Mutation error when saving redux store. All copied and saved
- How do I display an array where each object in array is a new <td> in ReactJS
- Cannot display images in ReactJS?
- e.target.closest() returns null in React
- State list change not causing re-render Next.js/React
- How to update React properties after a delay in time and constantly sort an array to the nearest specific number X?
- Using Object.keys(), map(), ...Array(), reduce() and concat() in a single const
- Why is state not changing when I call setFormData() from a certain place in my React code?
- Firestore to query by an array's field value
- Tailwindcss v3 not working with next.js v12
- Jest/Enzyme React branches
- React refreshes component after function call
- Error writing my first HOF react component: This may happen if you return a return a Component instead of <Component />
- React-sortable-hoc with formData
- Reactjs best strategy to define a variable for render method
- Formik 'initialValues' Typescript Errors in React.js with hooks
- Material UI TextField Not Showing Value
- how to redirect routes in Netlify using vite and react?
- Why can't i get value select and input?
- How to create a dynamically sized form for an array of inputs using React/Redux?
- How to get div in an arc shape?
- React having troubles creating a ticking clock that can change time manually
- How can I get count of selectable rows?
- Material ui: change duration of Skeleton animations
- react-navigation: Is it possible to pass a callback to children (e.g.changeHandler)?
- What does "Warning: setState(...): Can only update a mounted or mounting component" mean?