Блог

Я получил список объектов, которые я отображаю на экране с помощью функции .map . Это выглядит так:

Компонент 1:

 let itemList = [
        {
            type: "White T-shirt",
            id: 1,
            cost: 300,
            image: whiteTshirt
        },
        {
            type: "Purple T-shirt",
            id: 2,
            cost: 350,
            image: purpleTshirt
        },
        {
            type: "Baseballcap",
            id: 3,
            cost: 150,
            image: whiteCap
        },
            {
            type: "Vice Golfball",
            id: 4,
            cost: 40,
            image: golfball
        },
        {
            type: "Mousepad",
            id: 5,
            cost: 200,
            image: mousepad
        }
    ];

       let products = itemList.map(items => {

           let item = 
           <div key={items.id}>
                <h2>{items.type}</h2>
                <img className="image"  src={items.image}></img>
                <p className="price">${items.cost}</p>
                <button onClick={onBuy} className="buy-btn">Buy</button>
            </div>
            return item;
        })

       return(
            {shoppingcart ? <Component2 /> : null}
            <main> {products} </main>
)
  

Компонент 2:

 const Comopnent2 = props => {
    const [webshop, setWebshop] = useState(false);

    return(
    <div>
        {webshop ? <Webshop /> : null }
        
<a href="/Webshop" onClick={e => { e.preventDefault(); setWebshop(true)}} >
<p className="to-shop"> Back to shop</p></a>
<h2 className="shopping-header">Your Shopping Cart</h2>

        <div className="cart-container">

            // Here i want to object that i clicked display

        </div>
        )
}

  

Я хочу поместить один конкретный объект в другой массив в другом компоненте, который у меня есть. Я хочу сделать это, когда я нажимаю кнопку, которая вызывает функцию onBuy. Как мне это сделать? Спасибо.

Сначала создайте крючок для элемента корзины внутри компонента 1:

 const [cartItem, setCartItem] = useState();
  

устанавливайте CartItem всякий раз, когда нажимается кнопка и вызывается onBuy:

 onBuy (id) {
  let checkoutItem = this.itemList.find(item => item.id === id)
  setCartItem(checkoutItem)
}
  

Вам потребуется передать идентификатор элемента при объявлении кнопки, которая вызывает функцию onBuy .

        let products = itemList.map(items => {

       let item = 
       <div key={items.id}>
            <h2>{items.type}</h2>
            <img className="image"  src={items.image}></img>
            <p className="price">${items.cost}</p>
            <button onClick={onBuy(item.id)} className="buy-btn">Buy</button>
        </div>
        return item;
    })
  

Чтобы передать этот выбор компоненту 2. Вы можете передать его как prop в компоненте 1:

 return(
        {shoppingcart ? <Component2 item={cartItem} /> : null}
        <main> {products} </main>
  

В компоненте 2 вы можете соответствующим образом отображать данные из реквизитов:

 const Comopnent2 = props => {
const [webshop, setWebshop] = useState(false);

return(
<div>
    {webshop ? <Webshop /> : null }
    
    <a href="/Webshop" onClick={e => { e.preventDefault(); setWebshop(true)}} >
    <p className="to-shop"> Back to shop</p></a>
    <h2 className="shopping-header">Your Shopping Cart</h2>

    <div className="cart-container">
        {prop.item.name} //whatever properties your cart item has, I have used name just for example
    </div>
    )
 }