Without usestate issue

by

Doesnt preserve the state between render

  • randomDiceroll initial value is 3
  • When you click the button, it doesnt update the
    <p>{randomDiceroll}</p>
  • It doesnt preserve the values between the renders.
  • In the next post we will see how this problem is resolved.
				
					import React from "react";

const WithoutUseState = () => {
  let randomDiceroll = 3;
  let changeDiceRoll = () => {
    randomDiceroll = Math.floor(Math.random() * 6) + 1;
    console.log(`%c ${randomDiceroll}`, "color:red;font-size:20px");
  };

  return (
    <>
      <div className="myClass">
        <p>{randomDiceroll}</p>
        <button onClick={changeDiceRoll}>ROll DICE</button>
      </div>
    </>
  );
};
export default WithoutUseState;

//align div to center

Leave a Comment