рендеринг 2 компонентов в реакции js

Question

Я остановился на одной проблеме в своем проекте. Я использую 2 разных компонента, один из которых представляет собой карту, а второй - диаграмму, и я показываю данные API для этого компонента, но при рендеринге обоих компонентов они будут переопределены друг для друга. решить эту проблему

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

карта и спидометр - это два разных компонента, которые будут созданы на основе ответа API

Answer 1

При переопределении, если вы имеете в виду, что компоненты перекрываются друг с другом, что может вызвать проблему CSS, попробуйте поместить <br> между обоими компонентами.

или

попробуйте увеличить ширину до 100% и уберите эти 300px