forEach, возвращая jsx в функцию, как это сделать?

Question

Зацикливаясь на массиве, нужно заполнить фрагмент jsx в функции, которая вызывается из return.Я знаю, что я сделал неправильно, как я могу сделать это правильно?

  const example = () => {
    return (
      <div className="row text-center" style={{marginTop: '100px'}}>
        <Workbook filename="example.xlsx" element={<button className="btn btn-lg btn-primary">Try me!</button>}>

          <Workbook.Sheet data={dataArray[0].rows} name="Sheet A">
            { 
              dataArray.forEach((item) => { return (<Workbook.Column label={item.columns.text} value={Item.columns.dataField} />) });
            }
          </Workbook.Sheet>
          <Workbook.Sheet data={data2} name="Another sheet">
            <Workbook.Column label="Double aaa" value={row => row.aaa * 2}/>
            <Workbook.Column label="Cubed ccc " value={row => Math.pow(row.ccc, 3)}/>
          </Workbook.Sheet>
        </Workbook>
      </div>
    );
  };

Answer 1

Вы не должны возвращаться с .forEach.

Вы должны использовать .map.

  const example = () => {
    return (
      <div className="row text-center" style={{marginTop: '100px'}}>
        <Workbook filename="example.xlsx" element={<button className="btn btn-lg btn-primary">Try me!</button>}>

          <Workbook.Sheet data={dataArray[0].rows} name="Sheet A">
            { 
              dataArray.map(item => <Workbook.Column label={item.columns.text} value={Item.columns.dataField} />);
            }
          </Workbook.Sheet>
          <Workbook.Sheet data={data2} name="Another sheet">
            <Workbook.Column label="Double aaa" value={row => row.aaa * 2}/>
            <Workbook.Column label="Cubed ccc " value={row => Math.pow(row.ccc, 3)}/>
          </Workbook.Sheet>
        </Workbook>
      </div>
    );
  };