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

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>

CodePudding user response：

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:

CodePudding user response：

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>
);
}

CodePudding user response：

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

CodePudding user response：

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>
    );
}

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}} />
   )
}