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>
    );
  })}

Related Query

More Query from same tag