Блог

Родитель выглядит так, и ему необходимо передать функцию дочернему элементу, чтобы он мог вызвать ее и передать информацию обратно.

 import './App.css';
import Item from './components/Item';
import React, { useState } from 'react';

function App() {
  const [items, setitems] = useState([...]

  const addItemToCart = item => {
    console.log(item);
  };

  return (
    <>
      <ul className='items'>
        {items.map(item => (
          <Item
            name={item.name}
            quantity={item.quantity}
            description={item.description}
            thumbnail={item.thumbnail}
            addItemToCart={() => addItemToCart}
          ></Item>
        ))}
      </ul>
    </>
  );
}

export default App;
 

Ребенок выглядит вот так:
(кнопка (прокомментированная) — это место, где функция должна срабатывать при нажатии, и мне нужно передать информацию другой функции)

 import React from 'react';

export default function Item(props) {
  return (
    <>
      <li className='item'>
        <img src={props.thumbnail} className='item-thumbnail' />
        <h3 className='item-name'>{props.name}</h3>
        <p className='item-description'>{props.description}</p>
        <label className='item-quantity'>
          {props.quantity > 1
            ? `${props.name} come in groups of ${props.quantity}`
            : ''}
        </label>
        <button onClick={props.addItemToCart('hello')}>add item</button> // this is the button where the function needs to trigger on click and i need to pass information up to the other function
      </li>
    </>
  );
}

 

Первый в приложении:

 addItemToCart={addItemToCart}
 

затем в пункте:

 <button onClick={() => props.addItemToCart('hello')}>add item</button>
 

В оригинальной версии onClick будет называться как:

 ('hello') => addItemToCart // ref to a function, not the call itself
 

 addItemToCart={() => addItemToCart}
 

должно быть

 addItemToCart={addItemToCart}
 

И

 onClick={props.addItemToCart('hello')}
 

Для

 onClick={() =>props.addItemToCart('hello')}