在 react js 中渲染 2 个组件

Question

I stuck on one problem in my project I use 2 different components one is a card and second is a chart and i show the API data on that component but when I rendering both components it will be override to each other how I can solve this problem

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>        
    )
}

card and speedometer are two different components it will be created based on API response

Answer 1

By Overriding, if you mean the components are overlapping on one another, that might probably a CSS issue, try putting a <br> between both the components.

or

try increasing the width to 100% and remove that 300px