Why doesn't Next.js Json.map work properly?

Question

I want to build a simple component where the data comes from a JSON list. On the website I can see the console.log(dat.CardId) so it works for just console.log(). I can't see the cards from the .map function. The Style is bootstrap. I really don't think that something is wrong at the code.

import { Card,Button,Container,Row,Col } from 'react-bootstrap'
    
const data = [{'CardTitle':'Simple Website','CardText':"Some quick example text to build on the card title and make up the bulk of the card's content.", "CardId":"Simple-Website"},{'CardTitle':'Simple Website','CardText':"Some quick example text to build on the card title and make up the bulk of the card's content.", "CardId":"Simple-Website"} ]

export default function Cards() {
    return (
        <>
            <div>
                <Container fluid>
                    Cards
                    {data.map(dat => {
                        {console.log(dat.CardId)}
                        <Row>
                            <Col>    
                                <Card style={{ width: '18rem' }}>
                                    <Card.Img variant="top" src="pexels-tima-miroshnichenko-6612358 (2).jpg/100px180" />
                                    <Card.Body>
                                        <Card.Title>{dat.CardTitle}</Card.Title>
                                        <Card.Text>
                                            {dat.CardText}
                                        </Card.Text>
                                        <Button variant="primary">Go somewhere</Button>
                                    </Card.Body>
                                </Card>
                            </Col>
                        </Row>
                    })}
                </Container>
            </div>         
        </>
    )
}

There's no JSON in this question. – Teemu Jun 28 '21 at 08:13 — Teemu, Jun 28 '21 at 08:13

score 1 · Accepted Answer · answered Jun 28 '21 at 08:15

1

Use return ( ... ) in a .map to render an element. https://stackoverflow.com/a/39999745/15257712

Example:

array.map((entry, index) => {
  return (
    <div key={index}>
      ...
    </div>
  )
})

answered Jun 28 '21 at 08:15

Manuel

188
1
12

Why doesn't Next.js Json.map work properly?

1 Answers1