I have a boolean state of bgWhite. If it changes, I change the background colour. This all is in the index.js file in the pages directory.
How can I access the state bgWhite from the component to do something such as changing the bg color?
import { useState } from "react";
import Hello from "../components/Hello";
export default function Home(props) {
const [bgWhite, setBgWhite] = useState(true)
return (
<div>
<div onClick={() => setBgWhite(!bgWhite)} className='cursor-pointer inline-block bg-blue-400 p-4 m-2 select-none'>Click me</div>
<div className={`${bgWhite ? 'bg-red-500' : 'bg-green-600'} p-4 m-2 inline-block`}>BG</div>
<Hello />
</div>
);
}
The <Hello /> component:
export default function Hello() {
return(
<div className="p-4 m-2 bg-yellow-600 inline-block">
<div>Hi</div>
</div>
)
}
Also, if I happen to make the background colour changing div into another component taking the state with it, then how can I access the state from that component to the <Hello /> component?
In correct in new ustate
import { useState } from "react";
import Hello from "../components/Hello";
export default function Home(props) {
const [bgWhite, setBgWhite] = useState(true)
const {hello} = useState(Hello)
return (
<div>
<div onClick={() => setBgWhite(!bgWhite)} className='cursor-pointer
inline-block bg-blue-400 p-4 m-2 select-none'>Click me</div>
<div className={`${bgWhite ? 'bg-red-500' : 'bg-green-600'} p-4 m-2
inline-block`}>BG</div>
<Hello />
</div>
); }
Since Hello component is a child of your index.js page component you can just pass the state and the setState function via props, it's the easiest way for the example you are providing and I guess this is what you are looking to do.
import { useState } from "react";
import Hello from "../components/Hello";
export default function Home(props) {
const [bgWhite, setBgWhite] = useState(true)
return (
<div>
<div onClick={() => setBgWhite(!bgWhite)} className='cursor-pointer inline-block bg-blue-400 p-4 m-2 select-none'>Click me</div>
<div className={`${bgWhite ? 'bg-red-500' : 'bg-green-600'} p-4 m-2 inline-block`}>BG</div>
<Hello bgWhite={bgWhite} setBgWhite={setBgWhite} />
</div>
);
}
Then, receive those props in your component and use them as you need:
export default function Hello({bgWhite, setBgWhite}) {
return(
<div className="p-4 m-2 bg-yellow-600 inline-block">
<div>Hi</div>
</div>
)
}
If you take the div that changes it's background color along with the state to another component, you would need to think a bit more how would you pass that state to the Hello component. You could make Hello a child of the new component you are talking about or use Context API to access that state anywhere in your app.