Building a react project | bgChanger

[@l-_._-l]

IMPORTANT TAKE AWAY FROM VIDEO The on click method in React expects a function reference You can't directly pass parameters inside the function, instead, you need to pass it as a reference or use arrow function syntax 17:12 Refresh karne pe olive is lie aa rah a kio ke usestate ki defualt value di ha humne

[@curiousforever1271]

please check the video once again from 14:36, Onclick expect the function not function reference or function return value. And also last 2 line of yours is correct

[@sahilmane2601]

@@curiousforever1271 He is talking right bro. when you want to pass anything in onClick function, you have to pass the function reference that's why if you want to pass any function without parameters, for example handleClick() you will write like this, onClick={handleClick}. It is without parantheses because it is reference for that function and passed as an onclick event handler. Ofcourse you can like it like this onClick={()=> handleClick()}. But we mostly write this syntax when you have any parameters in the function. I mean to say that this person commented is right that it passes function references. Research on your own.

[@Azharuddin-khan]

@@curiousforever1271 Yes that's correct, also he said "The on click method in React expects a function reference" but this is not about react. This is will happen in plain javascript and html as well. it has to do with javascript not react

[@Devharsh007]

8:48 Note: Of your background Color doesn’t change, delete all the initial styling from index.css (don’t nt remove tailwind’s 3 lines of code)

[@umardarazofficials3529]

saved me

[@IFYatharthAurangpureIT]

Thanks bro❤

[@shreyanshkumar4528]

thanks

[@community4u]

thanks man ❤🫂

[@aaryanbhardwaj9739]

not working don't know why it is not taking the width height as that of the page

[@ankan-dev]

Actually the initial state has color olive and the reload technically resets the state. So, it gets the olive color.

[@Sandeep_04512]

I think this is right

[@rdrenio]

apna default color olive hai that's why after clicking refresh its show olive color

[@guptasagar694]

Obviously

[@abhishektrivedi1377]

Same answer. ;)

[@RayanTanzeem]

agar latest color ko local storage mein save kr lein tou desired output aye gi

[@sehajdeepsingh7427]

1:39 Paused and completed the task. My approach was a bit different, I created a component and passed required color in the props, which created a button with {props.color} text and executed onclick btn which passes to function colorChange where the props.color is set { document.body.style.bgColor = props.color; } Thus it only took me 10-11 line of code and 7 component line code for 7 different colours.

[@RRR-yz1kf]

i also did with the same approach🤭

[@anshuldigan5859]

literally this channel will become the best code channel on youtube one day

[@GenZdev]

Channel hi banna hai. Sir hamare already no 1 hai 😎

[@navinkumarsahu1159]

definitely bro but that'll happen only after you share this channel

[@chaiaurcode]

❤️❤️❤️

[@bgspradeep]

​@@chaiaurcodenext project todo app le aao sir

[@abhipatil7]

It's already the best. But underrated.😅

[@JatinBisht]

Completed 9 videos loving it to be very honest its sometimes complicated to learn from english video but this playlist directly connects with the heart and mind or hum chai peene ke sath react ke concepts bhi nhi bhool paate. Thank you sir hitesh sir >>> college

[@anuragbhattacharjee3984]

17:20 because default value of color was set to olive in the useState.

[@Debraj-HTC]

The initial value in the setState is olive, that's why background defaults to olive upon reloading.

[@deepeshji]

page refresh, it took default useState value which is "olive".

[@farmanali6349.channel]

17:12 Refresh krne par dobara se DOM print hota hai, ham by default jo color state ka value dia hua hai wo olive hai, is liay refresh krne pr olive aa raha hai.

[@vivekhalder2974]

Sir, the initial state is set once a page is reloaded. Sir, I also understood why two curly braces were used in style part. coz one to show that it is a js statement + the second one for the object. style is an object. last class mein aapne sikhaya tha ki code reusability ke liye ek component ko baar baar reuse kiya ja sakta hai. Yaha meine button ka component banate reuse kiya use. Button.jsx import React from "react" function colName(color){ return color.charAt(0).toUpperCase() + color.slice(1); } function Button(props){ const buttonStyle = { backgroundColor: props.color, color: props.text || "white" } return ( {colName(props.color)} ); }; export default Button App.jsx import { useState } from "react" import Button from "./components/Button" function App() { const [color, setColor] = useState("olive"); const handleButtonClick = (color) => { setColor(color); } return ( handleButtonClick("red")}/> handleButtonClick("green")}/> handleButtonClick("olive")}/> handleButtonClick("grey")}/> handleButtonClick("yellow")}/> handleButtonClick("pink")}/> handleButtonClick("purple")}/> handleButtonClick("lavender")}/> handleButtonClick("blue")}/> handleButtonClick("white")}/> handleButtonClick("black")}/> ) } export default App;

[@adityatomar3784]

@17:15 initialSate is Olive Thank You Hitesh Sir for the Superb content

[@ajtechclub]

17:15 as olive is the default value for variable color and on clicking button we are updating values & UI as well

[@abhisheksubhashram6910]

Refresh karte hi color ko value olive set horahi hai that is useState ki default value: useState("olive") . Thankyou so much sir for this beautiful lecture

[@alakhkaler664]

Your content really awesome no-one can replace you, Sir please try to upload videos regularly but the only problem is consistency

[@MohammedHasmi577]

Sir i have made this project by myself without watching this video , literally cry after seeing my progress i dont have any words for you jajakallah so much sir ❤❤❤

[@LearnWithManan.110]

nice brother keep learning Allah pak kaamiyab kare ga apko, mene bhi banaya ye mene sirf ak component banaya bs button ka or phir import kar liya thora logic laga magar ho gaya props ke bhi use kiya mene❣❣

[@pranavanand24]

Very nice video again and because I paused the video right at the start and attempted it by myself so I ended up making different components for container and buttons. Because I took this approach, I also came across this irritating problem where button text was getting lost becasue of background color, so I used ternary operators to sort that out and use "white" for black button. I noticed that you too have done that in your original finished version which you didn't discuss in the video and that was great! Learnt a lot again

[@KapilMaan-vw9sd]

u are right i use text-white for black color

[@Academics_Srijan]

useState me initial state Olive colour hai that is why wo refresh karne kar initial value le leta hai by default which is olive colour!!!... Thank you so much for the in-depth series Sir! ❤

[@dineshshinde2116]

14:46 If we call to the setColor it is the method and we can't give the argument so that we could able to update it so for that purpose., we are firing a call back to avoid that 17:22 As "olive" color is set initially and gave refrence of that in inline css so that it is triggering Grasp things - 1. React - inline css : - when ever we want to give the inline css at that time we cant to write the two curly braces and then in that the css properties as . The property should be separated by the comma , style={ {backgroundColor: color, height:"200px"}} 2. if we are enjecting any variable instance so we are not required to enclose it with the curly braces as that is already in the curly braces - style={ {backgroundColor: color} }

[@suryaallinone2931]

17:18 Because, first me background color : olive set kiya hai

[@SikhleTu]

17:20 sir ne toh dra hi diya😂😂.. puch rhe ya dhamka rhe❤❤

[@Nagar2024]

You’ve got me falling in love with React all over again! ❤💻, Thank youuuuuuuuuuuuuuuuuuu so much Sirrrrrrrrrrrrrrrrrrr!

[@asifsaeed7716]

ap k samjhany c to itna smj a e gia h k olive color es liyee a rhaa we set olive color in initial state. when we reload then reset the state and color olive e aaay ga na .. thanks for learning us with good n friendly style sir .. more respect from Pakistan

[@MelbinKurien]

Refresh krne pe wapis vo olive islie ho rha hai kyunki jaha humne state define kia hai waha color ka default value olive hai agr use black krdenge toh vo black hojayega refresh krne pe ya koi bhi color jo hum default mai dede .

[@SagarBisht-ww4tm]

specificity in css , inline style has been given highest priority , it is default color so it is olive

[@AshwaniSingh-b7d]

17:15 Because you have set default color as olive so that's why when we refresh the page the color become olive

[@adnanjamil2956]

what a teaching style sir 💌💌 love from pakistan 💌💌

[@swapnildapkosh2813]

initially we have set the state to "olive" color that's why on refresh it is turning to that color. Awesome explanation 👍. Thanks Sir.

[@codingbyte847]

onclick method in react expects a function, so here we have to pass function not a parameter. Thanks a lot sir for this great series🥰🥰🥰

[@LearnWithManan.110]

Sir mene to ak hi button ka component banaya or kaam ho gaya♥ Code: let text = props.text; return ( { document.querySelector("body").style.backgroundColor = text; }} className="px-10 py-3 rounded-full text-white border-none" style={{ backgroundColor: text }} > {text}

[@manglam6555]

React's useState doesn't persist state across page reloads. When the page refreshes, the entire component re-renders, and useState resets the state to the initial value defined in its argument

[@arghya_0802]

17:12 The intial value of color is set as "olive" which we are using to set the backgroundColor of our parent div, that's why on refreshing we are getting olive in place of any other color

[@amitaeyron7585]

I have completed this project as a task. And enjoying development with chai aur react . Thankyou so much for guiding us .

[@avanishexplorer]

🤩 easypezy project with fun.... Just addicted to this playlist

[@SHUBHAMJHA-o3g]

the image at 16:58 is good overview of the code. Its the css part. otherwise the hook is the important one.

[@zrotrasukha8733]

17:13 ye isliye hua kyunki aapne useState me default value "'Olive" kar rakha hai. I can't thank you enough for this course sir.

[@gaurabsingh9317]

whenever we refresh the page the react components re-renders and the state is set to initial value(olive) . React state is ephemeral (it is lost on page refresh because it exists only in memory).

[@nandishbt2405]

Actually the initial state has color olive and the reload technically resets the state.

[@vinay_dev19]

when we reload the page the background is return to the default color bacause the change we do in page is not save anywhere , and when we reload the page browser dom is repainting. in other word actually the initial state has color olive and the reload technically resets the state. So, it gets the olive color.

[@RahulKumar-tz5ic]

you make easy to understand sir 🤗 I was worried that how can I learn these code because it was like rocket science in your language 😅 btw, thank you sir.

[@mukesh3055]

Hitesh sir your teaching method is unique from others

[@rushidave7092]

17:15 because olive is default variable color define in useState.

[@akshayramani6263]

The default color olive is set in the usestate, so when the state is reloaded the state resets and the color changes.

[@aashutosh937]

Because the initial state for color is set to olive so when the page reloads it goes back to default color which is olive

[@sohomdas2767]

17:20 default value olive, so when reloading the webpage, it (useState) changes the value to the default value i.e. olive

[@ravindrasaini6789]

Actually the initial state has color olive and the reload technically resets the state. So, it gets the olive color.

[@aakashsaini9472]

the initial state has color olive and the reload technically resets the state. it gets the olive color.

[@Archit-Mishr]

17:20 because default value of state is set to Olive.

[@thecalgarians4597]

Loved this simple yet powerful project❤

[@themonkspeaks299]

defualt value set is olive that's why it is showing the olive color when refreshed

[@mycollegeLife.]

cuz initial state olive h to reload hone pe dom repaint ho jata h aur bg color olive set ho jata h.

[@prateekshrivastava2802]

As useState has Olive color initialized to it !! Amazing video sir ,Thankyou !!

[@sameershahidbutta]

17:23 page refresh krnay pr useState wali initialize value yaani "olive" ko lga deta hy

[@vishalbelwal3445]

Thanks a lot sir video pause karke jitna ab tak sikha tha aapse wo sab use karke khud se banaya hai pura project ye wala i know basic hai sir ye project but still thankyou aapka padhane ka traika hi khuch aisa hai ki koi cheez bhooli hi nahi jati 🙏🙏

[@priyankasaini7204]

6:18 "agar m likh paaya to"😂bahut hasate hasate padhate ho ..maja aata h apse padhne m

[@pritimodanwal06]

initially state value is olive that's why whenever page is reload initial state value is changing and define default whatever we are defining in useState('olive');

[@bibhudendupalai5234]

nice project Basic building Refresh ke bad pura dom reload hota hai na wo usestate ka defult value leta hai

[@Zed.h-y9m]

Olive islie .. qk state ki initial value ham ne olive set kr rakhi hai.. so whenever we refresh the page state b apni initial value pe chala jaata hai...

[@nehakaler6677]

Finished this video. Loving the series. Thankyou Sir.

[@NoTimetoexplaiNn]

Olive is the default value of the color set by the user so when you refresh the page reloads and the value of color is olive so the bg is olive

[@v1shal_yadav]

as olive is the default value for variable color and on clicking button we are updating values & UI as well

[@AjayKumarShahu-i6r]

The default background color is set to olive when the page is refreshed. This is achieved using the useState hook in React, which initializes the background color state with the value 'olive' on the initial render.

[@r4ge848]

he initial state has color olive and the reload technically resets the state. So, it gets the olive color.

[@punitkingvlogs]

because usestate set is olive color so after refreshing page the set is useState color

[@flash8135]

Becuase you already had initialized the color state with the olive color and whenever you refresh the browser it renders the component or reset the state variables

[@deepakfauzdar8034]

olive is the default value, once page gets reload, the state again sets to olive as it is the default state.

[@gurusacademy2021]

I did it using components (code is below). Awesome Explaination. return ( handleEvent("red")} /> handleEvent("green")} /> handleEvent("blue")} /> handleEvent("yellow")} /> handleEvent("pink")} /> handleEvent("violet")} /> handleEvent("white")} /> handleEvent("black")} /> )

[@komalverma9104]

17:13 after reload color apne initial state me wapis aa jata h.. That's why after reloading we get olive color

[@addysin004]

beacuase the default color is set to olive. to change this we can save the value of color to local storage so that even after reloading the value of color remains what it was before reload

[@abhijithjana2001]

Acutely the initial value of colour is olive . As restart the page program will start it's execution from root (line number 1)

[@ajeetkumarrauniyar]

17:21 default value is olive which is rendered after the page refresh.

[@r4ge848]

IMPORTANT TAKE AWAY FROM VIDEO The on click method in React expects a function reference You can't directly pass parameters inside the function, instead, you need to pass it as a reference or use arrow function syntax 17:12 Refresh karne pe olive is lie aa rah a kio ke usestate ki defualt value di ha humne

[@MohammedHasmi577]

17:18 refresh krne pr olive kyu ho rahaa hai? Sir ji hamne initial state me color olive use kiya hai so refresh krne pr initial state me aayega jiska color olive hai ❤️❤️

[@ApurvaKalvadeSDE]

There is also an optimization technique for writing the onClick methods. Event Delegation if I am not wrong. Write a common onClick method on parent and refer each child with name .... and the parent tracks the element's name in "e.target" ... from there also, we can set the value of bg-color. This is bcoz we are adding handler to each buttons. If there are 100s of color buttons then 100s of handlers will be created for each buttons which is not good for page performance.

[@vivekmishra4398]

can you share this in code

[@rjl6814]

17:15 useState me olive set kr ke rhke hue h . olive ke jhga blank rhe gy to by default white lelega

[@zayyynull_]

That was a great tutorial. Thanks man!!!

[@sourajkhatua2000]

Because The Default Color Has Been Set To olive .. And By The way love Your Content Hitesh Sir.. Do such Video more....♥♥♥♥♥♥

[@grover24]

olive is the default state . when we reload the page none of the values (i.e. red, green, blue) is selected so browser loads the default color that is set by us in the very beginning

[@itsnazirali1010]

initial state of the background color is olive , so when you hit refresh or Rerender the state the in initial state is display it

[@Suraj_Hasule]

bcoz initial state value (color) olive and after reload resets all state ,that's why color is olive

[@SenseiVraj]

17:26 because we set the color at olive hard coded so... when we reload it sets the color to default which is olive

[@Piyushverse17]

My approach : # Button.jsx file code : function Button({ colorName, changeColor }) { return ( {colorName} ) } export default Button; # App.jsx file code: import { useState } from "react" import Button from "./Button" function App() { const [color, setColor] = useState("black") return ( setColor("Red")} /> setColor("Blue")} /> setColor("Green")} /> ) } export default App

[@Knowledgeseeker7101]

The initial value of the useState('olive') is applied after reloading. The initial value is being used.

[@Powerful-Manifestor-]

Refresh karne pe app reload hoti hai to component phirse create hoga and color ki initial value olive set kar dega

[@ankitpatel8818]

the color change because when the page reload the color change to its initial state which is Olive

[@yugkrishnagaming5378]

sir `setColor` on default "olive pe set h isliye har bar reload krne p vo bg olive hota h. we can use localStorage to prevent it.

[@visheshgupta4990]

Because the initial state we set is olive colour and when we reload the page it resets it to the initial state which is olive colour that is why on reloading the page olive colour is displayed .

[@jeeveshkumar9682]

This project is a good chance to show off your knowledge via Event Delegation concept. Instead of adding event listener to each button you can put it on parent div.

[@jeeveshkumar9682]

Background Changer Red blue green

[@Ghoul-jy4ec]

On refresh it's olive cause we have defined the olive color at the initialisation of the color in the useState.

[@soumalyachakraborty574]

Actually the initial state i.e. in useState('olive') is set so that's why on refresh its showing its default color set in useState('olive')

[@ankushmaurya9426]

Because we have given the constant value in the useState as Olive that's why it is changing to olive after refreshing which resets the state.

[@shivanshsaxena9336]

Olive is the default color in usestate therefore when we refresh our webpage it automatically changes its bg-color to olive

[@vishwakarma-gaurav]

olive color is coming on refresh, because the preset value in the useState function if set to be "olive"

[@gaurijadhav9501]

Thank you so much sir. for giving confidence ..Created react first program

[@PCuser-o3y]

17:24 because we have set the default colour to be olive when declaring the useState() in the function

[@Akbarali0011]

Because we have set olive as default background color but when we click specific colored button the our setColor takes argument value which we have passed and change the color parameter value

[@hariomchouhan2520]

Because olive is default value of state and the reload state is take a default value. so it gets the olive color

[@ToLoHasso]

Refresh karne se pura page paint naya dom tree ban rha hai, toh nae dom tree mai jo value initialise ki hai vo he jaegi islie page olive he paint hoga refresh karne pe 17:26

[@sameer07x19]

This video is 80% tailwind 20% logic

[@Ovi_93]

Becoz you had set the initial state of useState to 'olive' like in counter app we set it to 0, so thats why it is reseting its state to initial