如何在 reactjs 中更改子组件 state

Question

I came across the following problem: I need to use another component's function inside a component:

header.js

export default function Header() {

  const [showModalLogin ,setShowModalLogin] = useState(false);

  return(
    <>
    <span>Hi,  <Link onClick={() =>{ setShowModalLogin(true)}}>login</Link> </span>
    {showModalLogin ? <LoginModal setShowModalLogin={setShowModalLogin}/> : ''}
    </>
  );
}

home.js

import Header from '../../components/header/header';

export default function Home() {

  return (
    <>
      <Header />
      <Link onClick={() =>{ setShowModalLogin(true)}}>open login</Link>
    </>
}

How do I do in home.js to call the setShowModalLogin function that is in header.js? I'm trying to use the context api too, but I still can't solve it.

Answer 1

You can just place useState in Header component and pass setShowModalLogin as props:

import Header from '../../components/header/header';

export default function Home() {
  const [isShowModalLogin ,setShowModalLogin] = useState(false);

  return (
    <>
      <Header isShowModalLogin={isShowModalLogin} setShowModalLogin={setShowModalLogin} />
      <Link onClick={() => setShowModalLogin(true)}>open login</Link>
    </>
}

export default function Header({ isShowModalLogin, setShowModalLogin }) {
  return(
    <>
    <span>Hi,  <Link onClick={() => setShowModalLogin(true)}>login</Link> </span>
    {isShowModalLogin ? <LoginModal setShowModalLogin={setShowModalLogin}/> : ''}
    </>
  );
}

Answer 2

Then you can do it in this way:

1. Create Context
2. Save useState inside
3. Use it everywhere you need

export const YourContext = createContext();

export const YourProvider = ({ children }) => {
  const [isShowModalLogin, setShowModalLogin] = useState(false);

  const value = {
    isShowModalLogin,
    setShowModalLogin
  };

  return <YourContext.Provider value={value}>{children}</YourContext.Provider>;
}

// App.js

const App = () => {
  return (
    <YourProvider>
      <AppContent />
    </YourProvider>
  )
}

So now you can use it like here:

import Header from '../../components/header/header';

export default function Home() {
  const { isShowModalLogin, setShowModalLogin } = useContext(YourContext);

  return (
    <>
      <Header isShowModalLogin={isShowModalLogin} setShowModalLogin={setShowModalLogin} />
      <Link onClick={() => setShowModalLogin(true)}>open login</Link>
    </>
}