React JS how to display JSON with arrays inside array

Question

I have a MongoDB query which returns JSON as show below:

   
      {
        _id: 'New List',
        listItems: [
          {
            _id: '5b86ef7dfb6fc03893e56a54',
            name: 'Coffee',
            quantity: '5',
            listName: 'New List',
            urgency: 'High'
          }
        ]
      },
      {
        _id: 'My List',
        listItems: [
          {
            _id: '5b8552ed32f03600146b82e5',
            quantity: 1,
            listName: 'My List',
            urgency: 'Normal',
            name: 'Tea bags',
            date: '2018-08-28T13:49:33.615Z',
            __v: 0
          },
          {
            _id: '5b855b9e3fcbc00014a11a4d',
            quantity: 1,
            listName: 'My List',
            urgency: 'Normal',
            name: 'Cold Sore Medicine',
            date: '2018-08-28T14:26:38.705Z',
            __v: 0
          },
          {
            _id: '5b85b5daec7c4008f4294977',
            quantity: 1,
            listName: 'My List',
            urgency: 'Normal',
            name: 'School Bag(Satchel)',
            date: '2018-08-28T20:51:38.993Z',
            __v: 0
          },
          {
            _id: '5b85b6246c915f0014dfa961',
            quantity: 1,
            listName: 'My List',
            urgency: 'Normal',
            name: 'School Uniform',
            date: '2018-08-28T20:52:52.227Z',
            __v: 0
          }
        ]
      }

I am trying to display it using react inside a listgroup element using reactstrap. The query is grouped by "listName" and I want to show the List organised by listName.

Below is the code which does not seem to work.

render() {

        const { items } = this.props.item;
        if (items) console.log("items: " + items.toString())

        return (

            <Container>
                <ListGroup>
                    <TransitionGroup className="shopping-list">
                        {items.map(({ listItems }) => (


                            <ListGroupItem>
                                {listItems}
                            </ListGroupItem>

                        listItems.map((eachThing) =>
                                <ListGroupItem>
                                    {eachThing.name}  | {eachThing.quantity} | {eachThing.listName}
                                </ListGroupItem>
                            )))}
                    </TransitionGroup>
                </ListGroup>
            </Container>
        )
    }

Below is the error in compiling the code:

Syntax error: Unexpected token, expected , (34:0)
[1]
[1]   32 |                                 </ListGroupItem>
[1]   33 |
[1] > 34 | listItems.map((eachThing) =>
[1]      | ^
[1]   35 |                                 <ListGroupItem>
[1]   36 |                                     {eachThing.name}  | {eachThing.quantity} | {eachThing.listName}
[1]   37 |                                 </ListGroupItem>

Any help would be greatly appreciated.

You need the internal map wrapped in {}

charlietfl
– charlietfl

2018-08-29 23:35:03 +00:00
Commented Aug 29, 2018 at 23:35 — charlietfl
– charlietfl, Commented Aug 29, 2018 at 23:35

sdabrutas · Accepted Answer · 2018-08-29 23:44:41Z

1

With @charlietfl's comment and a little editing based on what you're trying to achieve, your entire code should be

render() {

    const { items } = this.props.item;
    if (items) console.log("items: " + items.toString())

    return (

        <Container>
            <ListGroup>
                <TransitionGroup className="shopping-list">
                    {items.map(({ listItems }) => (
                        <ListGroupItem>
                            {listItems.map((eachThing) =>
                                <ListGroupItem>
                                    {eachThing.name}  | {eachThing.quantity} | {eachThing.listName}
                                </ListGroupItem>
                            )}
                        </ListGroupItem>
                    ))}
                </TransitionGroup>
            </ListGroup>
        </Container>
    )
}

answered Aug 29, 2018 at 23:44

sdabrutas

1,5273 gold badges14 silver badges28 bronze badges

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

1 Comment

AliMeer Over a year ago

Thanks everyone, its working now. David Z's code worked and with a bit of editing I have managed to get the Look and feel the way I wanted. Thanks a lot everyone :)

David Z. · Accepted Answer · 2018-08-29 23:42:25Z

0

You are mixing raw JavaScript in your JSX component. You must wrap listItems.map(...) in curly braces to evaluate an expression. Additionally, a React component should have a single root. Try updating your render function to:

render() {
  const { items } = this.props.item;
  if (items) console.log("items: " + items.toString())

  return (
    <Container>
      <TransitionGroup className="shopping-list">
        {items.map(({ listItems }) => (
          <React.Fragment>
            <ListGroupItem>
              {listItems}
            </ListGroupItem>

            {listItems.map((eachThing) =>
              <ListGroupItem>
                {eachThing.name}  | {eachThing.quantity} | {eachThing.listName}
              </ListGroupItem>
            )}
          </React.Fragment>
        ))}
      </TransitionGroup>
    </Container>
  )
}

answered Aug 29, 2018 at 23:42

David Z.

2311 silver badge2 bronze badges

1 Comment

sdabrutas Over a year ago

Based on JSON data provided, I think this part doesn't make any sense <ListGroupItem>{listItems}</ListGroupItem> considering listItems is an array

Collectives™ on Stack Overflow

React JS how to display JSON with arrays inside array

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related