CODEWITHSUNDEEP
javascriptreactjs
phershbe
phershbe

Reputation: 319

Update parent state based on props and onClick from child in React

I'm building a kind of shopping cart in React. I set some props in the child component and then passed state into them when they are used in the parent component. There are several things that I want to do, but to begin I want to update the quantity of the item when the buttons are pressed. I know how this would work if it were all coded in the parent component, but I'm trying to create a child component in order to make the code more efficient and to figure out how components interact with each other.
Can the props of the child be manipulated with onClick events here, and be used to change the state of different things?
If so, how do I do that?
Is there a logical way of creating this, or is there a much simpler way?
I know that Redux uses state management, but I want to figure this out in React for now.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      applesCount: 0,
      orangesCount: 0,
      peachesCount: 0,
      grapesCount: 0,
      applesPrice: 0.00,
      orangesPrice: 0.00,
      peachesPrice: 0.00,
      grapesPrice: 0.00
    }
  }
  
  render() {
    return (
      <>
      <h1 className="text-center">Grocery Store</h1>
      <div className="row text-center m-2">
        <div className="col border border-primary m-2">
          <Item fruitName='Apples' quantity={this.state.applesCount} price={this.state.applesPrice}/>
        </div>
        <div className="col border border-primary m-2">
          <Item fruitName='Oranges' quantity={this.state.orangesCount} price={this.state.orangesPrice}/>
        </div>
        <div className="col border border-primary m-2">
          <Item fruitName='Peaches' quantity={this.state.peachesCount} price={this.state.peachesPrice}/>
        </div>
        <div className="col border border-primary m-2">
          <Item fruitName='Grapes' quantity={this.state.grapesCount} price={this.state.grapesPrice}/>
        </div>
      </div>
      </>
    )
  }
}

class Item extends React.Component {
  render() {
    return (
      <>
      <h1>{this.props.fruitName}</h1>
      <div>picture here</div>
      <div className="row d-flex justify-content-center">
        <button>-</button>
        <h1>{this.props.quantity}</h1>
        <button>+</button>
      </div>
      <h2>${this.props.price}</h2>
      </>
    )
  }
}

export default App;

Upvotes: 3

Views: 10406

Answers (2)

amirhosein farhoodi
amirhosein farhoodi

Reputation: 1

you can do many type of solution for this

  1. passing method wich that do setState to child and call it in there then you can update the state of parent wich gets from props.

    const Parent = () => { const [value, setValue] = useState('') return (); }

    const Child = ({setValue}) => {}

  2. do it with redux or another state management libraries .

Upvotes: 0

user16435030
user16435030

Reputation:

Pass down a callback to the child.

const Parent = () => {
  const [value, setValue] = useState('')

  return <Child setValue={setValue}/>
}

...

const Child = ({setValue}) => {
  // use setValue here which will update parent state
}

Upvotes: 11

Related Questions