Пропсы, массивы React JS не окажите услугу?

Question

[bmg01]

Здравствуйте
есть такой компонент

function Main() {
   const database = [
        {
            id: 1,
            name: "MacBook",
            price: 100000,
            bought: false,
            rating: 5,
        }]
  return (
        <div className="main">
            {database.map((product) => {
                return <Maincont product={product}/>
            })}
        </div>
    )
}
И есть еще такой компонент <Maincont/>
  function Maincont(props){
    return (
        <div className ="card">
            <div className="card-info">
                <div className="card-name">{?}</div>
                <div className="card-price">{?}</div>
            </div>
        </div>
}

теперь вопрос как вы уже поняли тут дела с пропсами я не знаю как сделать так чтоб из переменной datebase name и price отображались в конечном результате

Comments

[Михаил]

props в консоль выведите

[Alex]

Почитайте правила оформления вопросов.

[G F]

Походу ты рано взялся за реакт. Прочитай на лерне про объекты главу для начала.

Answer 1

[NewD16]

Если я правильно понял вопрос, то у этой проблемы два решения. props, которые ты получаешь в компоненте Maincont - это объект, у которого должно быть поле product (если верить этой записи <Maincont product={product}/>). Значит, чтобы получить name и price объекта product - нужно просто обратиться к ним: props.product.name и props.product.price. Но есть более практичный способ - с помощью деструктуризации ты можешь передавать в props в виде {product}. Теперь ты можешь в компоненте обращаться непосредственно к своему объекту product - function Maincont({product}){...}. Но было бы еще логичнее в данной ситуации передавать не объект продукт, а его поля!

<Maincont name={product.name} price={product.price}/>

, а сам компонент будет выглядеть вот так: function Maincont({name, price}){...}

И последнее - чтобы еще круче это записать передавать пропсы можно также с помощью деструктуризации вот так:
<Maincont {...product} />. Правда при таком подходе ты передаешь все поля объекта, а в компоненте похоже используются только два, так что самый логичный вариант -

<Maincont name={product.name} price={product.price}/>