Passing state from parent to child functional React Component

AMP_035 0
Viewed 40

I'm trying to refactor some code into separate components using Typescript / React but am having trouble sharing state between components. I'm trying to update a boolean between components and am curious about the best way to go about this.

The state can be set in either the parent or child. I'm using the useState hook in the parent component and then trying to set the state in the child component. In my child component, I'm getting the error cannot find setState.

In my parent component I'm declaring my state using:

const [state, setState] = React.useState({
    loggedIn: false,
  });

I'm trying to pass state to the child component via props with:

      <div> <ChildComponent {...state}/> </div> // trying to pass in props, but not sure how to also pass in setting state.

I'm not sure how to allow state changes in the child component:

export const ChildComponent = (state: boolean) => { 
    setState(true)
}

Any help is appreciated.

state reactjs typescript
5 Answers

First you should not pass states like this, you can use global state management for it. But by this way of passing state you can do it as props like:

<ChildComponent state={state.loggedIn}/>

and

export const ChildComponent = ({state}) => { 
    ...
}
PakDragoon0

There you go:

Parent.tsx

export default function Parent() {
  const [state, setState] = React.useState({
    loggedIn: false,
  });

  return <Child state={state} setState={setState} />;
}

Child.tsx

type Props = {
  state: { loggedIn: boolean };
  setState: React.Dispatch<
    React.SetStateAction<{
      loggedIn: boolean;
    }>
  >;
};

export default function Child({ state, setState }: Props) {
  return <div>Child</div>;
}
Enfield li0

you should add constructor with "props" to your child component and by this you can reach the parent state:

class ChildComponent extends Component {
   constructor(props) {
   super(props);
   this.state = {
     ...
   };   
}

in your code you can use this.props.propertyYouWantToUse

Feriem0
Alija Fajić0

Pass the setState function to the child component

Ashwini Ravi Nair0
Related