How to pass a value for useState hook from another component in ReactJS?

user_16760422 0
Viewed 4607

I have two components:

Parent.js

import { useState } from "react";

function Parent() {
    const [showHideContent, setShowHideContent] = useState("none");

    return (
        <div style={{ display: showHideContent }}>
            Some content here...
        </div>
    );
}

Child.js

function Child() {
    return (
        <button>
            Show/Hide Content
        </button>
    );
}

I want to pass two values none and block (one value at a time) through setShowHideContent of Parent component using Show/Hide Content button of Child component.

How to do this?

NOTE: These two components are saved in the same folder but in two different files.

These two component are rendered by App.js.

<Route path="/content">
    <Menu /> {/* rendering in LEFT */}
    <div className="content-flexbox">
        <Parent /> {/* rendering in CENTER */}
        <Child /> {/* rendering in RIGHT */}
    </div>
    <Footer /> {/* rendering in BOTTOM */}
</Route>
reactjs
4 Answers

It seems like you want the Child component to simply toggle the display value of some content in the Parent component.

As you've defined them though they are not parent-child, but rather they are siblings. As such if they need to share state/behavior, then the solution is to lift state up to a common ancestor, App in this case.

<Route path="/content">
  <Menu />
  <div className="content-flexbox">
    <Parent /> // <-- siblings
    <Child />  // <-- siblings
  </div>
  <Footer />
</Route>

See: Lifting State Up

Move the showHideContent state and updater into the parent App component, pass down the showHideContent state to Parent and the toggleVisibility callback to the Child.

function Parent({ showHideContent }) {
  return <div style={{ display: showHideContent }}>Some content here...</div>;
}

function Child({ onClick }) {
  return (
    <button type="button" onClick={onClick}>
      Show/Hide Content
    </button>
  );
}

export default function App() {
  const [showHideContent, setShowHideContent] = React.useState("none");

  const toggleVisibility = () =>
    setShowHideContent((value) => (value === "none" ? "block" : "none"));

  return (
    ...
    <Route path="/content">
      <Menu />
      <div className="content-flexbox">
        <Parent showHideContent={showHideContent} />
        <Child onClick={toggleVisibility} />
      </div>
      <Footer />
    </Route>
    ...
  );
}

Edit how-to-pass-a-value-for-usestate-hook-from-another-component-in-reactjs

user_86908570

You can simply pass values as prop to child component. Call your child component inside parent component and pass value

import { useState } from "react";
import Child from "//your path";

function Parent() {
const [showHideContent, setShowHideContent] = useState("none");

return (

    <div style={{ display: showHideContent }}>
       <Child showHide={showHideContent}/>
    </div>
);

} Now in your child component

function Child({showHide}) {
return (
    <button>
        {showHide}
        Show/Hide Content
    </button>
);
}
user_95427180

Include your Child component in your Parent component and pass hooks as props

import { useState } from "react";
// import the child component
function Parent() {
    const [showHideContent, setShowHideContent] = useState("none");
    return (
        <div style={{ display: showHideContent }}>
            Some content here...
            <Child showHideContent={showHideContent}/>
        </div>
    );
}

And use them in your child components

function Child({showHideContent}) {
    return (
        <button>
{showHideContent}
            Show/Hide Content
        </button>
    );
}

Another way of doing the same is by using Context API:

https://reactjs.org/docs/hooks-reference.html#usecontext

user_137140930
  1. You can pass an inline function as prop from parent to child like this.
function Parent(){
   const [showHideContent, setShowHideContent] = useState("none");
   return (
    <Child onButtonClicked={(toValue) => setShowHideContent(toValue)} />
   )
}


function Child({ onButtonClicked }) {
    return (
        <button onClick={onButtonClicked} >
            Show/Hide Content
        </button>
    );
}
  1. Pass down exact state modifier with same name
function Parent(){
   const [showHideContent, setShowHideContent] = useState("none");
   return (
    <Child setShowHideContent={setShowHideContent} />
   )
}

//or with prop speading
function Parent(){
   const [showHideContent, setShowHideContent] = useState("none");
   return (
    <Child {...{setShowHideContent}} />
   )
}
user_100044590
Related