Use react hooks (useState) to toggle an active div.

[@jackjack121]

You have no idea how much I've been losing my mind trying to figure this out. THANK YOU!!! You made seem so simple.

[@youtubejhilkey8802]

Thank you so much. i was stucked for three days while implementing netflix faq section. your logic quickly solved my problem

[@norrisdamianus5250]

after searching for several years, this is finally what I need

[@user-cs3mq3rf8h]

took me a decade

[@theodurcan2]

Excellent. Clear, concise. Not unnecessary code, many tutorials miss the mark because they saturate the described process with basically bloat. Cheers,

[@johnychinese]

I couldn't figure this out for 2 days Thanks alot man💯

[@promisechidubemumeh7383]

Wonderful. This is a life saver bro. Keep saving lives 😂

[@promisechidubemumeh7383]

Actually used it in my nav items though

[@dilanli7491]

This is exactly what I need! Thank you so much!

[@uzairabdullah208]

Exactly what I needed, well part of exactly what I needed!

[@elodiemuller1185]

If you want first object as default value (default color) do this : 1. Define a const outside the useState "appstate" (for exemple just before) const myObject = [{id :1, id: 2}] 2. in your useState "appState" change activeObject : null to activeObject: myObject[0] Enjoy :)

[@chymera8466]

It's not working. Can you double check? Thanks.

[@elodiemuller1185]

​@@chymera8466 It's been 4 months so i'm not sure it's this part of my code but : const myStepMenu= [ { id: 1, name: "test1" }, { id: 2, name: "test2" }, { id: 3, name: "test3" }, ]; const [actualStep, setActualStep] = useState({ activeObject: myStepMenu[0], objects: myStepMenu, }); const toggleActive = (index) => { setActualStep({ ...actualStep, activeObject: actualStep.objects[index], }); };

[@chymera8466]

@@elodiemuller1185 Works now. Thank you!

[@phanphongspvp]

@@elodiemuller1185 thankiu so much bro 💯

[@grovemagnus9630]

Thank you for the tutorial. This really helps with my React assignment.

[@neets7519]

Great teaching!! 👏👏👏👏👏👏👏👏

[@allistermugaisi1625]

Thanks a lot, great video! The concept helped to solve my problem.

[@rajatverma3122]

Really helpful, thank you sir

[@infernumw]

dude i legit love u

[@samyip]

I somehow like your mechanical keyboard clicking sound very much.

[@carolinaklein4946]

Great tutorial, even without sound

[@Basil_Porphyrogenitos]

thank you so much, works in nextjs too, i used the classnames library tho to be able to use several classes

[@dean55]

Fyi, when it imported useState that is correct now. Not sure which version of react this was allowed but I found this out a few months ago

[@JumaanaAmjad]

Thank you so much for this tutorial!

[@alexisk5978]

Thank you soooo much !!!

[@annasahradyan9849]

Thank you so much! , you are the best!!!

[@kgblog2156]

Thank You so Much

[@fonncatalina6464]

THANKSSS! You save my ass 😂

[@Goomie]

So is there an issue with just using the state object without the spread operator? (...) Im aware of what spread does, but not sure the implications in this scenario.

[@jesseneon1896]

Noisiest keyboard I've ever heard in my life

[@Ilian1Burgos]

Thanks a lot bro!! suscribed!

[@mianroshan3424]

Thank you!

[@lezarus217]

thank you so much

[@jeanpierrekoff9134]

Love You for this

[@whiterockjoe]

So, you compare references to the objects. mmm different than comparing values. Cool

[@vickyr4178]

Thanks Man❤️

[@paramgandhi5768]

it would have been better if you had showed this to indicate how active class changes in li items

[@loveregefalk4049]

Great stuff!

[@mazennaeim7734]

How can i select and unselect multiple boxes at the same time ? for example if i want to select 2 or more boxes?

[@ThomasWSmith-wm5xn]

kzbin.info/www/bejne/jmbLq4JvqMlnlbc&ab_channel=ThomasW.Smith

[@mazennaeim7734]

@@ThomasWSmith-wm5xn thank you so much exactly what I wanted for my project. All the best 🙏🏼

[@philadelfiaproducao]

You saved my life

[@paragrudani]

thanks god! I solved my big problem today! thank you!

[@haoxianglin4257]

I would like to ask, when I complete the code according to the video tutorial, the effect of my project display is that I have to click twice to highlight, may I ask why?

[@nikulyt3166]

Hard to watch on phone... No zoom in your screen where cursor follow? Mic is very fine

[@milibaby1]

hero

[@aluuusch]

Thanks for the tutorial. This keyboard is too loud though:D

[@hoangcuongtran4606]

thank you very much !

[@HaNaxHeart]

thanks man, you save me.

[@jacqueskorb879]

Thank you so much! How can I apply this to the blocks having different background images?

[@rahu1gg]

mean do you want different imgs and need a effect on that img when it is clicked?

[@omrishooshan9784]

how do you do it on a dynemic map which recieve values from a server and present them as li for example?

[@uzairabdullah208]

Please add the source code

[@budiagung5245]

Great content ! But can anyone explain elements on return its use for ?

[@uzairabdullah208]

I might be able to help if you explain your question a bit more

[@imharshakumar]

They are the names of the class.

[@jenyaspace]

How in TypeScript?

[@aidanwalker3058]

hey, nice tutorial :) how could i set the activeObject to the first box (id: 1) by default? I tried activeObject: tabState.objects[0] but its giving me an error

[@greendayblinkmetal]

I need the same, have you solved it?

[@aidanwalker3058]

@@greendayblinkmetal I still haven't nope would be useful to know

[@imharshakumar]

Do as shown below, it worked for me!!! object: [ { id: 1, toggled: true, }, { id: 2, toggled: false, },] function toggleActiveStyles(index) { if ( appState.object[0] === appState.activeObject || appState.object[index].toggled ) { return "imgCont activeBg"; } else { return "imgCont inactiveBg"; } } function callToggleFun(index) { appState.object[index].toggled = false; changeState({ ...appState, activeObject: appState.object[index] }); }

[@user-nb1mw2jj6p]

@@imharshakumar It did not work for me, but after I changed appState.object[0] to appState.object[index], it worked fine. Thank you anyway.

[@kevincornellius]

@@imharshakumar it did work very well for me but i think change the appState.object[index].toggled = false; to appState.object[0].toggled = false; or else it wont work

[@abhishekverma2568]

code daal do sir