Я хочу создать автоматически сгенерированную карту в React js

Question

Я разрабатываю карты в ответ js, эта карта автоматически генерируется на основе данных API, но все карты отображаются одна под другой, и я хочу оформить эту карту в рядном режиме. Я пробую много способов оформить эту карту в ряд, но это не сделано. Я пытаюсь встроить CSS, некоторые реагируют - bootstrap класс. Поэтому, пожалуйста, дайте мне несколько советов о том, как я могу создать эту карту.

class App extends React.Component {

elements = [];
state = {
    data:[ null ]
};

getBikes = () => {
    try {
        return axios.get('URL')
    } catch (error) {
        console.error(error)
    }
}

constructor(props) {
    super(props);
    this.props = props;
    //this.elements=["one", "two", "three", "four"];
}

componentDidMount() {
    const breeds = this.getBikes()
        .then(response => {
            if (response) {

                console.log(response.data.message)
                var arr = (response.data.message);
                //var elements = [];

                for (var i = 0; i < arr.length; i++) {
                    console.log(arr[i].bikeId)
                    this.elements.push(<div>
                        <Cards value={arr[i]} />
                    </div>);
                }
                this.setState({ data: arr[0].bikeId })
            }
        })
        .catch(error => {
            console.log(error)
        })
}

render() {

    console.log("printitng")
    //const array = [1,2];
    return (
        <div style={{ display: "flex" }}>
            <h1>{'This will always render'}</h1>
            {this.state && this.state.data &&

                this.state.map((item, index) => {
                    return <div key={index} style={{ width: "300px" }}>
                        <Cards elements={this.elements} /> //pass your props value
                    </div>
                })

                // < div >
                // <Cards elements={this.elements} /> //pass your props value
                // </div>

            }
        </div>
    )


}

}

Answer 1

Есть только одна поправка. Вы добавили элементы массива с помощью div, который является блочным элементом. Вам нужны pu sh элементы с span или вы можете дать класс div и перейти от блока к flex или встроенному блоку.

 componentDidMount() {
            const breeds = this.getBikes()
                .then(response => {
                    if (response) {
                console.log(response.data.message)
                var arr = (response.data.message);
                //var elements = [];

                for (var i = 0; i < arr.length; i++) {
                    console.log(arr[i].bikeId)
                   // Changed from div to span
                    this.elements.push(<span>
                                            <Cards value={arr[i]} />
                                       </span>);
                }
                this.setState({ data: arr[0].bikeId })
            }
        })
        .catch(error => {
            console.log(error)
        })
}

render() {

    console.log("printitng")

    return (
        <div>
            <h1>{'This will always render'}</h1>
            {this.state && this.state.data &&
                <div>
                    <Cards elements={this.elements} /> //pass your props value
                </div>
            }
        </div>
    )


}

}

Answer 2

class App extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   bikeId : null,
   data : []
  }
 }

 getBikes = () => {
  try {
      return axios.get('URL')
  } catch (error) {
      console.error(error)
  }
 }
 componentDidMount() {
  const breeds = this.getBikes()
      .then(response => {
          if (response) {
              this.setState({ data: response.data.message, bikeId: response.data.message[0].bikeId })
          }
      })
      .catch(error => {
          console.log(error)
      })
 }

 render() {
  return (
      <div style={{ display: "flex" }}>
          {
            this.state.data.map((item, index) => {
                return <div key={index} style={{ width: "300px" }}>
                          <Cards value={item} />
                       </div>
            })
          }
      </div>
  )
 }
}

задайте свойство flex родительского класса, после чего вы можете добавить столько дочерних элементов в одну строку, сколько сможете добавить.