How to manipulate state of parent component from child in react

Question

I'm trying to make a clicker game in react. I have a component that increments the amount of coins by 1. However, I want to be able to send this to another component so it can be used. Example: purchasing an upgrade, and subtracting the amount of coins.

How can I do this?

Game.jsx

export default function Game() {
    // set state to bet that of the Counter when it is updated



    const element = (
        <div className="app">
            <Counter />
            <UpgradeMenu />
        </div>
    );
    return element;
}

Counter.jsx

export default function Counter() {
    const [count, setCount] = useState(0);

    const increment = () => {
        setCount(count + 1);
    };

    const element = (
        <div className="section">
            <div className="counter">
                <h1>{count} coins</h1>
                <button onClick={increment}>Click</button>
            </div>
        </div>
    );
    return element;
}

Thank you in advance, and I hope this makes sense what I'm trying to do.

Answer 1

For that case, we could move the state to the parent ( Game component), then Counter component will receive count and onClick props.

import { useState } from "react";

export default function Game() {
  const [count, setCount] = useState(0); // move the state here

  function handleClick() { // this function will be passed to Counter component
    setCount(count + 1);
  }

  const element = (
    <div className="app">
      <Counter count={count} onClick={handleClick} />
    </div>
  );
  return element;
}

export function Counter({ count, onClick }) {
  const element = (
    <div className="section">
      <div className="counter">
        <h1>{count} coins</h1>
        <button onClick={onClick}>Click</button>
      </div>
    </div>
  );
  return element;
}

Check this working example: https://codesandbox.io/s/so-72469269-mehsdp?file=/src/App.js

This can be a good reference:

• https://beta.reactjs.org/learn/sharing-state-between-components

Answer 2

You can pass a function as a property for the children's element and run the function inside it.

Parent:

export function parentElement(){
  function myfunction() {return true}
    return(
      <chlidrenElement myFunction={myfunction}>
    )
  }
}

Children:

export function childrenElement({myFunction}){
  const hidden = myFunction();
  return(
    {
      hidden ?
      <chlidrenElement myFunction={myfunction}>
      : null
    }
  )
}