Html Question posted in
Some basic documentation can be found here.

Html – How can I make my OnClick ReactJS function remember the value I am passing

So, I am trying to make a memory game and I want my function "CompareValue" to remember the last variable I passed
I declared in the script at the beginning MemOne and MemTwo so they are global variables.
Here is my HTML code :

function Start(){
var Cartes = [];
const listes_value = [1,2,3,4,5,6,7,8];
const randomvalue = [...listes_value, ...listes_value].sort(() => Math.random() - 0.5);

Cartes.push(
    <center key={`row`}> 
        <div style={{ display: "flex", justifyContent: "center", margin: "20px 0" }}>
            <div style={{ marginRight: "5px" }}>
                <img src={img} onClick={() => CompareValue(randomvalue[1])} />
            </div>
            <div style={{ marginRight: "5px" }}>
                <img src={img}  onClick={() => CompareValue(randomvalue[2])} />
            </div>
            <div style={{ marginRight: "5px" }}>
                <img src={img}  onClick={() => CompareValue(randomvalue[3])} />
            </div>
            <div>
                <img src={img}  onClick={() => CompareValeur(randomvalue[4])} />
            </div>
        </div></center>

Here is my CompareValue function

function CompareValeur(value){
console.log("value :",value)
console.log("MemOne :",MemOne)
console.log("MemTwo :",MemTwo) 
if (pair % 2 === 0) { 
    var MemOne = value
    console.log("MemOne defined")

    pair++; 
} else { 
    var MemTwo = value
    console.log("MemTwo defined")
    pair++;

}
if (MemOne== MemTwo) { 
    console.log("Success !");
}
return MemTwo, MemOne}

Basically what I want my code to do is remember MemOne, and then compare it to MemTwo when another picture is clicked. But it seems that my function forget my variables at the very moment I return them

    var MemOne = 0; //Global variable
    var MemTwo = 1; //Global variable
    var pair = 0; //Global variable

Here is how I define them at the beginning of my script. Pair is however not lost but I dont’ understand why

Tags:

2

Answers


  1. 0

    You’re redeclaring a variable inside an if scope.

    var MemOne = value => MemOne = value

    Reassign, not redeclare

    Login or Signup to reply.
  2. 0

    One of the biggest features of ReactJS is that it uses the idea of state to store component-relevant information.

    Thus, when you need global variables, especially when it might change the rendering of the component, you can use the useState hook:

    function Start() {
    var Cartes = [];
    const valueArr = [1, 2, 3, 4, 5, 6, 7, 8];
    const randomValueArr = [...valueArr, ...valueArr].sort(() => Math.random() - 0.5);
    
    // declare it with initial value in your case, 
    // then you can use it within the component like global variable.
    // But also allows the component to re-render when it changes,
    // if you assigned it to the component.
    const [memOne, setMemOne] = useState(0);
    const [memTwo, setMemTwo] = useState(1);
    const [pair, setPair] = useState(0);

    const compareValue = (value) => {
    console.log("value :", value)
    console.log("MemOne :", memOne)
    console.log("MemTwo :", memTwo)
    if (pair % 2 === 0) {
      setMemOne(value);
      console.log("MemOne defined");
      setPair(pair++);
    } else {
      setMemTwo(value);
      console.log("MemTwo defined");
      setPair(pair++);
    }
    if (memOne == memTwo) {
      console.log("Success !");
    }
    return memTwo, memOne; // if the return is not used, it might not be needed.
  }

  Cartes.push(
    <center key={`row`}>
      <div style={{ display: "flex", justifyContent: "center", margin: "20px 0" }}>
        <div style={{ marginRight: "5px" }}>
          <img src={img} onClick={() => compareValue(randomValueArr[1])} />
        </div>
        <div style={{ marginRight: "5px" }}>
          <img src={img} onClick={() => compareValue(randomValueArr[2])} />
        </div>
        <div style={{ marginRight: "5px" }}>
          <img src={img} onClick={() => compareValue(randomValueArr[3])} />
        </div>
        <div>
          <img src={img} onClick={() => compareValue(randomValueArr[4])} />
        </div>
      </div>
    </center>

    However, I would also suggest you compose duplicated components out of the main component:

    const ClickableImage = (props) => {

    // ...put the compareValue function here

    // import the index for randomValueArr using props.
    // set it like <ClickableImage value={[index_that_you_want]} /> in the main Start() function.
    return (
        <div style={{ marginRight: "5px" }}>
            <img src={img}  onClick={() => compareValue(randomValueArr[props.value])} />
        </div>
    );
}

    Hope the answer helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search