0

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?

Nasem
  • 417
  • 2
  • 7
  • 15

2 Answers2

0

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>

); }

Mhmmad Rehan
  • 101
  • 1
  • 3
0

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.

ivanatias
  • 3,105
  • 2
  • 14
  • 25
  • The first solution worked. But do I need to pass both the bgWhite and setBgWhite to the component? The setBgWhite will be used only in the index.js file. So, why bother taking it to the component? – Nasem Jul 12 '22 at 04:40
  • @Nasem No, you don't need to. I wrote the example that way to explain that you can pass basically anything you need to your component via props. – ivanatias Jul 12 '22 at 04:42
  • @Nasem if you want to change `index.js`'s state through your `Hello` component then sure, you need to pass `setBgWhite` to it. – ivanatias Jul 12 '22 at 04:44
  • Understood. How about the context? How would I manage to pass the bgWhite state while the state is being changed in another component and I want to access it in the component? – Nasem Jul 12 '22 at 04:45
  • @Nasem Think about `Context` as your app's local store. In there you can define states, functions, etc. And use them anywhere in your app without worrying about props. This is ideal when the state sharing requirements in your app start to get more complex and you NEED certain states to be accessible in an easy way through your whole app, since everything will be centralized. You can read more about this [here](https://reactjs.org/docs/context.html) – ivanatias Jul 12 '22 at 04:53