How to render list of list in react?

Question

I have data in for of list of lists and I want to render it in the view.

The data:

{
    "blocks_content": [
        [
            "               Bakery",
            "            Company GbR",
        ],
        [
            "Bill no.3-7721         11:29:51 20.04.2021"
        ],
        [
            "1x Cappuccino          2,70€    2,70€  A"
        ],
    ]
}

I tried like this but I am not seeing any error or warning. what I could be missing?

return (
        <Container>
        ....
                    {
                        fileBlocks !== null &&
                        <Form.Field>
                            <Label>{fileBlocks["name"]}</Label>
                            {fileBlocks["blocks_content"].forEach((element, index) => {
                                <List key={index}>
                                {
                                  element.forEach((line, i) => {
                                     <List.Item key={i}>
                                       {line}
                                     </List.Item>
                                  })
                                 }
                                </List>
                            })}
                        </Form.Field>
                    }
        ...
        </Container>
    );

Shyam · Accepted Answer · 2021-06-18 18:53:52Z

3

use map instead of forEach .

{fileBlocks["blocks_content"].map((element, index) => (
                                <List key={index}>
                                {
                                  element.map((line, i) => (
                                     <List.Item key={i}>
                                       {line}
                                     </List.Item>
                                  ))
                                 }
                                </List>
                            ))}

Rendering Lists In React

edited Jun 18, 2021 at 18:53

answered Jun 18, 2021 at 18:43

Shyam

5,5171 gold badge15 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andy · Accepted Answer · 2021-06-18 19:03:06Z

forEach only processes arrays in place but doesn't return anything. map returns a new array of combined array information and JSX which React can use in the render.

function Example({ data }) {

  return (
    <div>
      {data.blocks_content.map(arr => {
        return (
          <ul>
            {arr.map((line, i) => <li key={i}>{line}</li>)}
          </ul>
        )
      })}
    </div>
  );

}

const data = {
  blocks_content: [
    ['Bakery', 'Company GbR'],
    ['Bill no.3-7721 11:29:51 20.04.2021'],
    ['1x Cappuccino 2,70€ 2,70€  A'],
  ]
};

// Render it
ReactDOM.render(
  <Example data={data} />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

karly · Accepted Answer · 2021-06-18 18:39:32Z

0

I make this mistake all the time! You need to use .map() instead of .forEach()

answered Jun 18, 2021 at 18:39

karly

4244 silver badges5 bronze badges

Collectives™ on Stack Overflow

How to render list of list in react?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related