Как передать инфу из массива объектов в карточку 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>
    )
}


Ответы (0 шт):