score:1
you need to deal with whole elements are once, not tags.
this is easier if you break it up into functions.
you can use splice
on an array to grab two items at a time.
e.g.
function createrow(elements) {
return (
<div>
{elements.map(createprogressbar)}
</div>
);
}
function createprogressbar(element) {
return (
<div>{element.index}</div>
);
}
function render() {
// ...
const rows = [];
while (myarray.length) {
const thisrow = myarray.splice(0,2);
rows.push(createrow(thisrow));
}
return rows;
}
score:1
you should modify the shape of your array into something like this before trying to render it.
[1,2,3,4] => [[1,2],[3,4]]
that way it would be easier for you to wrap it inside div
.
see the live demo
code to transform your flat array into nested array:
const list = [1, 2, 3, 4];
const [state, setstate] = react.usestate([]);
react.useeffect(() => {
let res = [];
for (let i = 0; i < list.length; i += 2) {
res.push([list[i], list[i + 1]]);
}
setstate(res);
}, []);
render logic:
{state.map(item => {
return (
<div style={{ border: "1px solid black", padding: "1em" }}>
{item.map(i => i)}
</div>
);
})}
Source: stackoverflow.com
Related Query
- JS open tag with if and close it in another one
- Embed custom form twice, one instance open and another is close with React js?
- How to close one modal and open another with Chakra UI?
- ReactStrap modal close icon is not getting show in the modal and How to use the header with some another tag
- How to automatically close an open details tag when another detail is clicked with React?
- I have a many poppers and want the one that is open to close when another one opens
- ReactJS: Have one className with binding and another className without
- How to make multiple HTTP requests with RxJS and merge the response into one payload and map it to another action?
- react-modal: How to close one modal and open a new one at the same time?
- How to open and close dropdown on btn-click, but in same time with outside click close?
- Is it possible to integrate multiple front end apps, one in vue and another in react, with a single laravel backend?
- For a component in React with Reux, how to not fire mouse event in one case and how to fire mouse event in another case
- Why when passing parameters from one component to another it arrives undefined and then arrives again with the data?
- How to extract props and states from one sibling component to another with react hooks?
- Arrays - why does something work with one item and not another even though they (to me) appear the same?
- how can i open and close components with onClick and dispatch close on out click with redux toolkit?
- Howto disable the edit option with one user while two browsers opened at a time only one browser get access to edit and another browser gets disable
- socket.io with Node.js and React.js UI does not update when I open multiple tabs or another tab in a different browser
- Multiple panels open and close at one click - Ant Design Collapse
- Displaying one value and sending another to backend with HTML <select> and <option> tags
- Show one div and hide another in an array with onMouseEnter in React
- Close detail panel and open another on material-table
- Formatting code with <pre> tag in React and JSX
- React img tag issue with url and class
- Replace array item with another one without mutating state
- Closing React Semantic UI modal with button and close icon
- How to validate one field against another with Yup?
- How to navigate to another page with a smooth scroll on a specific id with react router and react scroll
- How to replace a component with another one upon event (button click) in react js
- Flexbox layout with two columns on desktop and one column on mobile
More Query from same tag
- How can I pass a value into a useState
- Do React Hooks use more memory than Class Components?
- Difference between react-media and react-responsive
- Fill page with body and stick footer to bottom with flex (Tailwindcss, Nextjs)
- How can I access the __reactEventHandlers property of the DOM object?
- Display a button when a checkbox is checked
- Add external javascript file to React.js app
- React component isn't updating on socket.io event
- Can't get basic test to work in react-testing-utils with redux
- how can i change the color/size of google map markers in tomchent google-react-maps?
- After the migration of antd from 2.0 -> 3.0 the default font size got increased from 12px -> 14px , is there a way to customize the antd fontsize?
- React component inside Angular app: import scss files
- Disable submit button in React functional component if all input fields are not completed
- using grouped array in list component - react js
- Shopping cart / adding multiple items to cart
- What is the type of a styled-component's argument(s)?
- React - Set property of a component from another Component
- Export 'Switch' was not found in react-router-dom
- Access Table Header Row Key React
- How do I force leaflet to update the map?
- Can I use multiple booleans for conditional rendering in React?
- Concat multiple query param in react-router
- Use a generic types value for a property expecting 'number | string | undefined'
- Material UI - Drawer does not open
- How to make transition in React to display new HTML content based on updated state?
- Cannot declare React context in typescript?
- How can i make component accepts elements inside?
- How to render repetitive code based on conditions using react?
- Moving cursor in react slate-editor
- How do I test that my component has a specific className?