OBJECTS AND STATE

 HERE WE TRY TO CREATE A LUDO BOARD.


WE PASS THE COLORS AS OBJECTS.

  let [moves, setMoves] = useState({ blue: 0, red: 0, green: 0, yellow: 0 });
initial state

HERE , INORDER TO UPDATE THE COUNT OF BLUE, WE WRITE


  let updateBlue(){
    moves.blue+=1;
    console.log(`moves.blue=${moves.blue}`)
    setMoves(moves);
  }


HERE , IT DOES'NOT WORK.

THE SCREEN IS NOT RENDERED. THIS IS BECAUSE THE STATE OF THE OBJECT DOESNOT CHANGE.

BECAUSE IN JS , OBJECTS AND ARRAYS CANNOT BE MANIPULATED OR MODIFIED.

EVEN IF THE VALUES OF AN OBJECT ARE CHANGED, THE ADDRESS OF THE OBJECT REMAINS SAME.

WE KNOW THAT THE COMPONENT IS RE-RENDERED IF AND ONLY IF THE STATE CHANGES.AS THE OBJECT'S STATE REMAINS SAME , THE COMPONENT DOESNOT RENDER.

HENCE WE HAVE TO CREATE A COPY OF THE OBJECT. WE USE "SPREAD"(...OBJ) TO CREATE A COPY.


LUDOBOX.JSX

import { useState } from "react";
export default function Board() {
  let [moves, setMoves] = useState({ blue: 0, red: 0, green: 0, yellow: 0 });

  let updateBlue = () => {
    setMoves((prevMoves) => {
      return { ...prevMoves, blue: prevMoves.blue + 1 };
    });
  };
  let updateRed = () => {
    setMoves((prevMoves) => {
      return { ...prevMoves, red: prevMoves. red+ 1 };
    });
  };
  let updateYellow = () => {
    setMoves((prevMoves) => {
      return { ...prevMoves, yellow: prevMoves.yellow + 1 };
    });
  };
  let updateGreen = () => {
    setMoves((prevMoves) => {
      return { ...prevMoves, green: prevMoves.green + 1 };
    });
  };
  return (
    <>
      <p>Blue moves:{moves.blue}</p>
      <button style={{ backgroundColor: "blue" }} onClick={updateBlue}>
        +1
      </button>

      <p>Red moves:{moves.red}</p>
      <button style={{ backgroundColor: "red" }} onClick={updateRed}>
        +1
      </button>

      <p>Yellow moves:{moves.yellow}</p>
      <button
        style={{ backgroundColor: "yellow", color: "black" }}
        onClick={updateYellow}
      >
        +1
      </button>

      <p>Green moves:{moves.green}</p>
      <button style={{ backgroundColor: "green" }} onClick={updateGreen}>
        +1
      </button>
    </>
  );
}











Comments

Post a Comment

Popular posts from this blog

DEPENDENCIES IN useEffect()

Image
 DEPENDENCIES REFER TO STATE VARIABLES. WHATEVER VARIABLE DECLARED AS A DEPENDENCY WILL ONLY BE PERFORMED AS A SIDE EFFECT. WE DECLARE THEM AS ARRAYS IN TWO  WAYS,  [COUNTX] - MEANS THAT ONLY COUNTX WILL BE USED AS A SIDE EFFECT. [] - EMPTY , MEANS THAT SIDE EFFECT IS PERFORMED ONLY WHEN THE PAGE IS RENDERED ( NOT RE-RENDERED). ( IN THE BEGINNIG)  EX- WE CREATE TWO STATE VARIABLES, COUNTX AND COUNT Y , HERE WE ONLY ADD SIDE EFFECTS TO COUNT X. import { useEffect , useState } from "react" ; export default function Counter () {   let [ countx , setCountx ] = useState ( 0 );   let [ county , setCounty ] = useState ( 0 );   let incx = () => {     setCountx (( currCount ) => currCount + 1 );   };   let incy = () => {     setCounty (( currCount ) => currCount + 1 );   };   useEffect ( function PrintSomething () {     console . log ( "this is a side effect" );   },[ co...
Read more

ACTIVITY1

Image
 SHOW A HELLO MESSAGE  ALONG WITH THE USERNAME WITH THE GIVEN TEXT COLOR. TWO PROPS ARE GIVEN, USERNAME AND TEXTCOLOR. ACTIVITY1.JSX function Activity1 ({ userName , textColor }) {   let styles = { color : textColor };   return < h3 style = { styles } > Hello! { userName } </ h3 > ; } export default Activity1 ; APP.JSX import Activity1 from "./Activity1.jsx" ; function App () {   // let name = "abhi";   // return <ProductTab />;   return (     <>     < Activity1 userName = "abhii" textColor = "yellow" />     < Activity1 userName = "ashwith" textColor = "orange" />     < Activity1 userName = "bharath" textColor = "red" />     < Activity1 userName = "vinay" textColor = "red" />     </>   ) }
Read more

CONDITIONALS

Image
 CONDITIONAL STATEMENTS (IF) CAN BE PASSED AS TERNARY OPERATORS OR EVEN BY USING(  &&) LOGICAL AND OPERATOR. import "./Product.css" ; function Product ({ title , price , features }) {   return (     < div className = "Product" >       < h4 > { title } </ h4 >       < h5 > price: { price } </ h5 >       { price > 15000 ? < p > Discount of 5% </ p > : null }       { /* <p>{features.map((feature) => <li>{feature}</li>)}</p> */ }     </ div >   ); } export default Product ; LOGICAL AND OPERATOR.       { price > 15000 && < p > Discount of 5% </ p > }
Read more