如何从一个子组件在父组件中设置 state 并使用 react 和 typescript 在另一个子组件中访问 state？

Question

i want to set the state in Parent component on clicking a button in child component. Also i want to access this state in other child component.

what i am trying to do? On clicking upload button (UploadButton component) i want the state isDialogOpen to be set to true. and i want to access isDialogOpen state in UserButton component.

below is the snippet,

function Main() {
    return (
        <Wrapper>
            <React.Suspense fallback={null}>
                <Switch>
                    <Route
                        exact
                        path="/page1"
                        render={routeProps => (
                            <Layout>
                                <React.Suspense fallback={<PlaceHolder></>}>
                                    <child1 {...routeProps} />
                                </React.Suspense>
                            </Layout>
                        )}
                    />
                    <Route
                        exact
                        path="/page2"
                        render={routeProps => (
                            <Layout>
                                <Child2 {...routeProps} />
                            </Layout>
                        )}
                    />
                </Switch>
            </React>
        </Wrapper>
    )
}


function Child1() {
    return (
        <UploadButton/>
    );
}

type Props = RouteComponentProps<{ itemId: string; productId: string }>;

function UploadButton({ match }: Props) { //here i set the state isDialogOpen
    const [isDialogOpen, setDialogOpen] = React.useState(false);

    const handle_click = () => {
        setDialogOpen(!isDialogOpen);
    };

    return (
        <>
            <Button onClick={handle_click}/>

            {isDialogOpen && (
                <UploadForm/>
            )}
        </>
    );
}


function Child2() {
    return (
        <UserButton/>
    );
}

function UserButton() {
    return (
        <Icon/>
    );
}

In the above snippet, isDialogOpen state is set in UploadButton component.

Now i want to modify above snippet such that the Icon component in UserButton component is hidden if isDialogOpen is true.

i want to access this isDialogOpen state in UserButton component.

what i have tried?

I can define a function in main component that sets isDialogOpen to true when Upload button is clicked in UploadButton component. but this needs passing the function as prop from main component to Upload Button and similarly passing the state to UserButton from main component.

Is there some neat way to do this? i am new to typescript and react. could someone help me solve this. thanks.

Answer 1

You should define state value and function which update state as props respectively to child components as props. You can take example of the code which I provide bellow

 const Child1 = (props) => { return <div>This is the counter value {props.counter}</div> } const Child2 = (props) => { return <div> <h2>Here the button to update the counter</h2> <button onClick={props.update}> Update counter state in the parent </button> </div> } class MainComponent extends React.Component { constructor(props) { super(props); this.state = { counter: 0 } } updateCounter = () => { this.setState({counter: this.state.counter + 1}); } render() { return <div> <Child1 counter={this.state.counter} /> <Child2 update={this.updateCounter} /> </div> } } ReactDOM.render(<MainComponent />, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

You can use the same component with context API and React HOOKS like this

import React, { useContext, useState} from 'react';

const CounterContext = React.createContext({
    counter: 0
});

const MainComponent  = (props) => {
    const [counter, setCounter] = useState(0);
    
    const updateCounter = () => {
        setCounter(counter + 1);
    }

    return <CounterContext.Provider value={
        counter,
        update: updateCounter
    }>
        <div>
            <Child1 />
            <Child2 />
        </div>
    </CounterContext.Provider>;
}


const Child1 = (props) => {
    const counter = useContext(CounterContext);
    return <div>This is the counter value {counter.counter}</div>
}

const Child2 = (props) => {
    const counter = useContext(CounterContext);

    return <div>
        <h2>Here the button to update the counter</h2>
        <button onClick={counter.update}>
            Update counter state in the parent
        </button>
    </div>
}