I have a game programmed in React code that is divided in two sections: The first section defines if the game is easy or hard. The second section is the game itself
Function App() {
return (
<>
<div><First/></div>
<div'><Second/></div>
</>
)
}
export default Main
On the first section, the user clicks on a button to define the level. That should have an impact on the second section. This is what I wrote.
First.js:
import React from 'react'
import { useState } from "react";
import '../paginas/ind.css'
import Second from './Second';
function First() {
const [Difficulty,setdifficulty] = useState(1)
function easy(e){
setdifficulty(1)
Second(1)
}
function hard(e){
setdifficulty(2)
Second(2)
}
return (
<>
{Difficulty !== 1 ? <div onClick={easy}>Easy</div> :
<div>Easy</div>}
{Difficulty !== 2 ?<div onClick={hard}>Medium</div>:
<div>hard</div>}
</>
)
}
export default Izq
Second.js:
import React from 'react'
import '../paginas/ind.css'
import Difficulty from './First'
import First from './First '
function Second (Difficulty) {
console.log(Difficulty)
return (
<>
{Difficulty === 1 ? <div>This game is going to be easy</div>:<div></div>}
{Difficulty === 2 ? <div>This game is going to be hard</div>:<div></div>}
</>
)
}
export default Central
I don´t know why but when I click on "easy" or "hard" on the First script, nothing happens on the second. By using console.log(Difficulty) on Second.js I can know that there is a change happening in the value of the variable "Difficulty". But the condition "{Difficulty === 1 ? This game is going to be easy:}" assumes that its value is cero. I can´t find any sense in this. Please help me.
Thank you
You must first learn about the basic of react, how to pass around props and states correctly, usage of context api in react etc. I recommend you go through some tutorials first.
That being said, if you change the functions of your App, First and Second component like below, you will get the result. This is just the most simplest way of doing it.
function First() {
const [Difficulty, setdifficulty] = useState(1);
return (
<>
{Difficulty !== 1 ? (
<div onClick={(e) => setdifficulty(1)}>Easy</div>
) : (
<div>Easy</div>
)}
{Difficulty !== 2 ? (
<div onClick={(e) => setdifficulty(2)}>Medium</div>
) : (
<div>hard</div>
)}
<Second Difficulty={Difficulty} /> // You will have to import the second component into this page. And remove it from App
</>
);
}
function Second(props) {
const { Difficulty } = props;
return (
<div>
{Difficulty === 1 && <div>This game is going to be easy</div>}
{Difficulty === 2 && <div>This game is going to be hard</div>}
</div>
);
}
function App() {
return (
<div>
<First />
</div>
);
}