5 replies

run function once but globally in react

when i make webpage, one thing i generally do is set all the divs to a random color using js for better understandng
now that i am using react. im confused how to do it

my react project goes like this
i have a

Main.jsx

Main.jsx

that renders

App.jsx

App.jsx

App.jsx

App.jsx

has a

main

main

tag , inside which i have

LeftSection

LeftSection

and

RightSection

RightSection

component
the

LeftSection

LeftSection

component has its own components that have their own jsx file

now i can write a function that that gets all the divs using

querySelectorAll()

querySelectorAll()

and loops through the arr and set random color to them, but when i make the function in

App.jsx

App.jsx

and call it there it only sets random color to the main tag cause

App.jsx

App.jsx

only has main tag in it inside which it has components. I thought since it has

LeftSection

LeftSection

and

RightSection

RightSection

which have rest of the divs inside of them but ofc in their own component file, i thought the function might effect that as well

now one solution that i have is to make a

Helper.js

Helper.js

which will have have the coloring function expoted and i'll import it in all my jsx and run the function

but that requires me to do the same thing multiple times for ALL the jsx files . is there any way i can basically call the function once somewhere globally and it'll effect all the jsx files so i dont need to repeat myself

or if there's any better way then I'm all in for it tnx

KP-C

Kevin Powell - Community•3y ago•

5 replies

glutonium

run function once but globally in react

Main.jsx

Main.jsx

that renders

App.jsx

App.jsx

App.jsx

App.jsx

has a

main

main

tag , inside which i have

LeftSection

LeftSection

and

RightSection

RightSection

component
the

LeftSection

LeftSection

component has its own components that have their own jsx file

now i can write a function that that gets all the divs using

querySelectorAll()

querySelectorAll()

and loops through the arr and set random color to them, but when i make the function in

App.jsx

App.jsx

and call it there it only sets random color to the main tag cause

App.jsx

App.jsx

only has main tag in it inside which it has components. I thought since it has

LeftSection

LeftSection

and

RightSection

RightSection

which have rest of the divs inside of them but ofc in their own component file, i thought the function might effect that as well

now one solution that i have is to make a

Helper.js

Helper.js

run function once but globally in react

run function once but globally in react

Similar Threads

Similar Threads

Similar Threads