How to access a state of an component from another component in next.js?

Question

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?

Answer 1

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.