горизонтальное выравнивание карты с помощью функции карты ReactJS

Question

Я пытаюсь выровнять горизонтальную карту, используя сетку, с реакцией начальной загрузки и функцией карты.

Я использую приставку для переноса данных через реквизит, поэтому я создаю JSON для его перемещения с помощью функции Map.

это часть моего кода

 render() {
    //const { tablaCliente } = this.state
    //const { isLoading } = this.state
    const { entity } = this.props;

    return (
        <div>
            <Header></Header>
            <div className="col-xs-4">
                <a className="btn btn-primary" href="/newclient">Nuevo Cliente</a>
            </div>
            <br />
            <center>
                <Spinner animation="border" role="status">
                    <span className="sr-only">Loading...</span>
                </Spinner>
            </center>
            <Container>
                {entity && entity.getAllEntities && entity.getAllEntities.length > 0 && entity.getAllEntities.map((item, index) => {
                    return (
                        <CardGroup value={item}key={index}>
                            <Card style={{ width: '1rem' }} >
                                <Card.Img variant="top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16b0e6bd8ef%20text%20%7B%20fill%3A%23999%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16b0e6bd8ef%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23373940%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.203125%22%20y%3D%2296.3%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" />
                                <Card.Body>
                                    <Card.Title> Cliente {item.name}</Card.Title>
                                    <Card.Text>
                                        {item.description}
                                    </Card.Text>
                                </Card.Body>
                                <ListGroup className="list-group-flush">
                                    <ListGroupItem>Estado:{''}{JSON.stringify(item.state)}</ListGroupItem>
                                    <ListGroupItem>Creado por: {item.createby}</ListGroupItem>
                                </ListGroup>
                                <Card.Body>
                                    <Card.Link href="/cliente">Card Link</Card.Link>
                                    <Card.Link href="/cliente">Editar</Card.Link>
                                </Card.Body>
                            </Card>
                        </CardGroup>)
                })}
            </Container>
        </div>
    );
}

Answer 1

Я не использую реагирующую загрузку, но вы можете добиться этого, выполнив

<Container>
  <div class='row'>
  {this.map(value => {
    return (
      <div class='col-md-6'>
        <Card />
      </div>
    )
  });}
  </div>
</Container>

Это должно работать

Обернуть функцию карты в строку и возвращаемый jsxв col

И просто не пишите целую логику в jsx, используйте функции или компоненты