Как передать инфу из массива объектов в карточку react js
App.tsx
import './App.css'
import Header from "./components/header/header.tsx";
import Card from "./components/card/card.tsx";
function App() {
const evacuators = [
{
id : 1,
img : '../../../public/whiteevac.png',
car :'5000 руб',
bike : '3000 руб',
offroad : 'нет',
bus : 'нет',
country: '50 руб/км',
text: 'Эвакуатор авто. Всегда на связи! Быстро и надежно'
},
{
id : 2,
img : '../../../public/yellowevac.png',
car :'4000 руб',
bike : '3000 руб',
offroad : '4000 руб',
bus : '6000 руб',
country: '50 руб/км',
text: 'Круглосуточно. Стоянка в районе метро Технопарк, быстро доберусь в любую точку города.'
},
{
id : 3,
img : '../../../public/whiteevac.png',
car :'5000 руб',
bike : '3000 руб',
offroad : 'нет',
bus : 'нет',
country: '50 руб/км',
text: 'Эвакуатор авто. Всегда на связи! Быстро и надежно'
},
{
id : 4,
img : '../../../public/yellowevac.png',
car :'4000 руб',
bike : '3000 руб',
offroad : '4000 руб',
bus : '6000 руб',
country: '50 руб/км',
text: 'Круглосуточно. Стоянка в районе метро Технопарк, быстро доберусь в любую точку города.'
}
]
return (
<>
<Header/>
<div className='banner-container'>
<img className='banner' src='../../../public/banner.png' alt='logo'></img>
<span className='text'>Телефоны для вызова эвакуатора в <a className='link'> Москве</a></span>
</div>
<Card ></Card>
</>
)
}
export default App
Card.tsx
import css from './card.module.scss'
export default function Card (props){
return (
<div className={css.card}>
<h2>Эвакуатор</h2>
<div className={css.content}>
<img className={css.img} src={props.img} alt=""/>
<div className={css.prices}>
<div className={css.price}><span className={css.item}>Легковой автомобиль</span> <span className={css.item_price}><b>{props.car}</b></span></div>
<div className={css.price}><span className={css.item}>Мотоцикл (квадроцикл и т.д.)</span> <span className={css.item_price}><b>{props.bike}</b></span> </div>
<div className={css.price}><span className={css.item}>Внедорожник</span><span className={css.item_price}> <b>{props.offroad}</b></span></div>
<div className={css.price}><span className={css.item}>Микроавтобус</span><span className={css.item_price}> <b>{props.bus}</b></span></div>
<div className={css.price}><span className={css.item}>Загородный тариф </span> <span className={css.item_price}><b>{props.country}</b></span></div>
</div>
<div className={css.info}>
<button className={css.button}><img src='../../../public/phone.svg' alt=''/> +7 999 99 99</button>
<button className={css.button}><img src='../../../public/homephone.svg' alt=''/> +7 999 99 99
</button>
<div className={css.spot}>
<span className={css.parking}><img className={css.here} src='../../../public/spot.svg' alt=''/> Место стоянки</span>
<span className={css.address}>Москва, ул. Пушкина</span>
</div>
<div className={css.ad}>
<span className={css.id}>ID объявления 63</span>
<span className={css.buy}>Заказать рекламу</span>
</div>
</div>
</div>
<p>{props.text}</p>
</div>
)
}