score:1
Accepted answer
Yes, create a map function to return the strings into DOM elements inside the ul. React does require a unique key prop to help keep track of these components, but for simplicity, in this case, you can use the array index.
{ obj.arrayItems.map( (item, i) => <li key={i} >{ item }</li> ) }
score:1
You can use a nested map function.
const renderOut = this.props.data.filter(obj => {
return this.state.keyToFind.includes(obj.name);
}).map((obj, idx) => {
return (
<div key={idx}>
<h2>{obj.name}</h2>
<ul>
{obj.arrayItems.map(item => <li key={item}>{item}</li>)}
</ul>
</div>
);
});
Source: stackoverflow.com
Related Query
- How can I render out the items in my array one at a time when returning them?
- How can I group specific items within an object in the same array and delete them from the core array?
- How can I add additional items to a store array and still be able to set the array to empty when resetting?
- useState hook can only set one object at the time and return the other object of the same array to initial state
- How to I keep a Material-ui Select open when I click on only one of the items in it
- How can I use Promise.all on an array of objects and then reassign them to the relevant key in a new object?
- How to stop re-rendering a whole list of items when only one item of the list is created or updated in ReactJs React-Redux?
- How can I wrap the Children of a Parent component in a HOC and render them in React?
- How can we open a Popper when page load the first time
- How can I create a global array in react? When I do separate operations for each index, I want them to save them in a single array
- How can I render the contents of an array nested inside an object in React Admin's show/ArrayField component?
- How can i only re-render the new child component when mapping an array from Redux state?
- How can I render the L.featureGroup from an array of coordinate
- How can I affect the state of just one individual component(card) when i have multiple versions of that component?
- How can I add array items to DOM one by one?
- how to change the style of only one react component that is being render through .map() when the component is clicked
- how can i extract arrays from one array & convert them in object and put them in a new array?
- How can I make useEffect not return the initial value? I keep getting empty array when I'm trying to pass an array of objects into a component
- Return a word from a words array when the time is the one from the time array. Javascript - React
- How can I render the same modal component into a list array itens in React?
- How to refresh the table data when one of the item has its valid till date and time has expired in React Js
- How do I iterate though an array of objects with keys and values in react and render them in the JSX( Both keys and Values)
- How can you check if there is an existing value in the array and not add it another time if so?
- In React How can I fetch data and render a single object in a states array without mapping the whole thing?
- How can I shuffle an array of objects on page render and map over the shuffled array without console warning of "two children with the same key"?
- How can I extract a nested array of objects and put them in the core array?
- How can I render an array of components in react without them unmounting?
- How can I take out the elements of the arrangement one by one? within div in Reactjs
- How can I change the value of an object in an array in react redux when the action is called?
- How can i avoid adding duplicates into array and only have one value at time for specific attribute?
More Query from same tag
- How to change background color of react native button
- Error: Invalid hook call how can i solve it?
- React-three-fiber for loop
- ReactJs Component Unexpected Token error on condition
- Render component after long running job
- React-Bootstrap FormControl with Icon
- What is the 'condition' type for react component children props?
- Remove element from array using react
- How can I check the react-query queries before execute?
- Cannot empty array in ReastJS useEffect hook
- Multi step form using react hooks
- Unable to test post methods with Jest due to error can not read mockImplementation of undefined
- Button with 3 states using React
- Connect React App served on dockerized Nginx to Express server
- Keep random numbers consistent after state change in React
- How can I pass image url from parent component to child component via props [REACT.JS]
- With a React Hook, trying to fetch multiple datas using forEach
- Validate email address within autocomplete field
- Best practice for emitting an event to another component in the same container?
- How is this react controlled component input's value updated when no props are passed
- Generate options by mapping over array of objects with react-select
- Cannot get kubectl environment variables on deploy
- Mapping array to components fails in react
- How to give array of spans bottom border at specific index? ReactJS
- Add and remove css class only during scroll in React?
- Add and remove class on react buttons
- Cannot read property 'value' of null input field?
- this set-cookie was blocked because its domain attribute was invalid with regards to the curent host url
- how to resize the font of "No Options"?
- Set a default ref value on React?
