Building a react project | bgChanger

[@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

[@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

[@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.😅

[@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.

[@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

[@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

[@ajtechclub]

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

[@anuragbhattacharjee3984]

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

[@deepeshji]

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

[@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❣❣

[@Debraj-HTC]

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

[@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 🙏🙏

[@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;

[@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

[@Nagar2024]

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

[@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

[@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

[@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! ❤

[@adityatomar3784]

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

[@amitaeyron7585]

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

[@gaurijadhav9501]

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

[@nehakaler6677]

Finished this video. Loving the series. Thankyou Sir.

[@achananagadurgaprasad5442]

The default value is olive thats why when ever the page is refreshed it is showing olive color. Thanks for the video sir!

[@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.

[@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}

[@SagarBisht-ww4tm]

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

[@SikhleTu]

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

[@avanishexplorer]

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

[@prateekshrivastava2802]

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

[@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🥰🥰🥰

[@KhayamIjaz]

I have been learning coding for 2 years on Yoututbe. But when I find this channel I think I wasted much of my time in watching useless toutorials. I wish I KZbin already suggested me this channel. Thank You Sir Hitesh.

[@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

[@dhruvdhuria1625]

because default color is olive

[@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.

[@mukesh3055]

Hitesh sir your teaching method is unique from others

[@PiyushKumar-mn3uh]

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

[@suryaallinone2931]

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

[@thecalgarians4597]

Loved this simple yet powerful project❤

[@UKfoodsecrets-nd9up]

from Pakistan, Amazing course . keep it up .

[@alfarajtimes4175]

Sir SIr SIr Sir Sir my wishes always with you , ur creating Indians highly skilled for free in a very exellent Manner

[@StrTuxNinja]

Initial State: Yeh wo shuruaati state hoti hai jise hum reset karke wapas usi haal mein laa sakte hain jaisa wo pehle tha. Jaise, maine background color change kiya, toh color change ho gaya. Lekin jab maine reset kiya, toh wo apni original state mein aa gaya. Is process ko hum initial state kehte hain. User State: User state us waqt ki current condition par kaam karta hai. Matlab, agar maine background color change kiya, toh us waqt ka current state jo hai, wo user state hota hai. User state hamesha present ya current situation ko dikhata hai.

[@zayyynull_]

That was a great tutorial. Thanks man!!!

[@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.

[@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.

[@bibhudendupalai5234]

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

[@Knowledgeseeker7101]

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

[@priyankasaini7204]

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

[@Dummy-co1lk]

reason for bg - olive after refreshing is that value of color of useState("olive"). Hence on refreshing it changes back to olive

[@adnanjamil2956]

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

[@v1shal_yadav]

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

[@codewithmallay9015]

Awesom tutorial sir....I learn some more in this tutorial.

[@mukuldeval8479]

One of the best Content for Development

[@rushidave7092]

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

[@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

[@pratiyushs381]

Olive isliye kyunki humne intial state ko olive rakha hai or onclick me function is liye bhi pass kiya gaya hai kyuki syntax aisa hai jisme onclick me hum setColor("color") react me aise paas karne par error milegi

[@shaikhmukhtar5748]

Because olive colour is our initial value.

[@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');

[@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

[@abhijithjana2001]

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

[@yogeshhiwant577]

const [color, setColor] = useState("olive") We have already set "olive" as the default color at the time of useState.

[@SHUBHAMJHA-o3g]

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

[@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")} /> )

[@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

[@adityagupta3269]

u can also give 'value' to all buttons and then pass that value attribute to setColor(event.target.value) include this setColor function inside another function called as handleColor

[@HimilPrajapati]

Wow, what a video, sir, I just learned this today, I've just started my day ( Day:5)

[@shivkumarsharma_d1529]

State ki initial value olive hai jub button par click hoga to color change hoga verna olive hi rahega same Refresh krne par olive ho jata hai because vo initial state main chala jata hai

[@themonkspeaks299]

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

[@ajeetkumarrauniyar]

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

[@Arvindkumar-pk2ri]

Sir I like your way of teaching

[@PCuser-o3y]

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

[@saifhassan3979]

because in main function the initial state color is 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.

[@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.

[@jnuwalaengineer]

Awesome Explanation✨✨

[@bdkoder]

THANKS for such an informative series.

[@chaiaurcode]

Glad you like them!

[@dumptruck3354]

i made a button component and used props to change individual value in the buttons no need to copy the button 11 times import React from 'react' function button(props) { return ( {props.name } ) } export default button

[@usama5619]

Thanx Sir You are awesome ❤ Great Video

[@sourajkhatua2000]

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

[@parassaini5252]

Thanks a lot sir for this valueable content for free to us

[@SyedFazalRahman-g7s]

Amazing lecture..

[@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

[@manasXDlol]

All buttons can be generated dynamically in a more easy and scalable manner: const colors = ['green','red','blue] etc maintain array of all colors inside the App(){ use map function to generate buttons: {colors.map((color,key)=>( {color} ))}

[@len5755]

`const [color, setColor] = useState("olive");` The default useState is olive, that's why... And always thanks sir...

[@r4ge848]

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

[@Ghoul-jy4ec]

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

[@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

[@abhishekpandit6729]

17:24 olive is the default value for variable color

[@MRYASH555]

initial color is olive

[@Powerful-Manifestor-]

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

[@ankushmaurya9426]

Done with the proj and made some changes and turned it into a flag in which you can change the color of top and bottom portion.

[@Suraj_Hasule]

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

[@hariomchouhan2520]

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

[@AkbarAli-bt7xi]

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

[@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

[@OMKARPATIL-gd7om]

I am grateful that I found your channel 😇☺

[@piyushchirote9262]

sir, godFather of coding

[@rjl6814]

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

[@ravindrasaini6789]

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

[@utkarshp1108]

SIr we have color property which is the base property that we have set in useState and that is initial value of useState that is reflecting in there