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.
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:
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
}
)
}