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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.