прокидывайте нужные пропсы в компонентЭто есть. Я прокидываю функцию-событие (по клику), которое висит на button:
const result = items.map((item, i) => {
return (
<div key={i} className={style.item}>
<div><img src={item.img} width="250px" height="250px" alt={item.name}></img></div>
<h2>{item.name}</h2>
<p>{item.components}</p>
<p><span>{item.mass}</span></p>
<p><span>{item.price}</span></p>
<ShoppingBasketContext.Consumer>
{( {addToCard} ) => (
<button onClick={(event) => {addToCard(event)}} >Заказать</button>
)}
</ShoppingBasketContext.Consumer>
</div>
)
})
return (
<div className="content">{result}</div>
)
Consumer использую т.к. state и функция работающая с ним находиться в компоненте на несколько уровней выше [если что-то не верно - напишите пожалуйста]. const target = event.currentTarget.closest(".item"),
name = target.querySelector(".item__name").innerText,
price = parseInt( target.querySelector(".item__price").innerText );
...
basketItems.push({ name: name, price : price, quantity : 1 });
...
this.setState({ basketItems })
или все таки сделать как правильноНужно сделать правильно.
Когда их вообще надо использовать ?
Желательно никогда. Только, если в них есть необходимость.
У вас в примере отступ от начала и конца по 1, а от середины 2.Я не могу понять как оно считается в найденном мою скрипте.
и хватит уже карусельки придумывать.Что такое "карусельки"?