CHANGES TO LOTTERY GAME

 IN OUR GAME, WE MAKE SOME CHANGES.

HERE, THE TICKET'S DIGITS ARE LIMITED TO 3. WE UPDATE THE LOTTERY TICKETS TO "N" DIGITS.

THE WINNING SUM IS LIMITED TO ONLY 15. WE UPDATE IT SUCH THAT THE SUM CAN BE ANY NUMBER.

IN THE GAME, WE HAVE ONLY ONE COMPONENT (LOTTERY). WE WILL ADD A TICKET COMPONENT.

HERE,  WE STORE THE TICKET [] ARRAY AS THE TICKET COMPONENT STORES THE TICKET INFO ONLY.

BUT, WE CANNOT DEFINE THE WINNING CONDITION IN THE TICKET COMPONENT.

THE WINNING CONDITION IS DEFINED IN THE LOTTERY COMPONENT ONLY.

TO CHECK THE WINNING CONDITION WE NEED THE TICKET ARRAY[].

AT THE SAME TIME , WE CANNOT PASS THE ARRAY INTO THE TICKET COMPONENT.

SHARING STATE BETWEEN COMPONENTS

-REACT DOC

SOMETIMES, YOU WANT THE STATE OF TWO COMPONENTS TO ALWAYS CHANGE TOGETHER.

TO DO IT, REMOVE STATES FROM BOTH OF THEM, MOVE IT TO THE CLOSEST COMMON PARENT AND PASS IT DOWN VIA PROPS.

THIS PROCESS IS CALLED LIFTING STATE UP, IT'S A COMMON DESIGN PATTERN IN REACT.

HERE, THE COMPONENT HIERARCHY IS

                                     APP

                                        |

                                  LOTTERY

                                         |

                                 TICKET

THE COMMON PARENT IS APP, BUT APP DOESNOT NEED TICKET ARRAY[] .

HERE, TICKET IS A STATE VARIABLE AND IT WILL BE DEFINED IN LOTTERY COMPONENT.

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