how get state in child react 18 version 2022

Question

I need to know the state of the counter button in real time so that when I click the add to cart button, I transmit the quantity of the product enter image description here.

And also I don't understand how to pass several props to the parent component. props.add(/how put few props/). For example, I want to pass props.item.title, props.item.price and state of the

const MenuItem = function(props){
      return (
        <div className="menu__item">
            <div className="img__menu">
                <img className="img__item" src={props.item.img} alt="" />
            </div>
            <h1 className="title__item">{props.item.title}</h1>
            <p className="description__item">{props.item.body}</p>
            <div className="buy_item">
                <p className="price">{props.item.price}</p>
                <Counter /*need props*//>
                <button className="buy_item-btn" onClick={() => props.add(/*props.item.title*/)}>Add</button>
            </div>
        </div>
      );
}

export default MenuItem

import React, { useState } from "react";

const Counter = function (props) {

  const [count, setCount] = useState(0)

  function increment() {
    setCount(count + 1)
  }

  function decrement() {

    if(count !== 0){
      setCount(count - 1)
    }    
  }

  return (
    <div className="counter__container">    
      <button className="button__buy-food" onClick={increment}>+</button>
      <h1 className="counter__title">{count}</h1>
      <button className="button__buy-food" onClick={decrement}>-</button>
    </div>
  );
}

export default Counter

how get state in child react 18 version 2022

0 Answers0