I have a parent and child component, i want to pass the state(share) from the child component to the parent one in the props(isChecked), how can this be done?
export class Form extends React.Component<FormProps, {
...,
isChecked?: boolean}> {
constructor(props: FormProps) {
super(props);
this.state = {
...,
isChecked:false
};
private checkField = () => {
const checked = this.state.isChecked
console.log('check '+checked)
}
render() {
}
return <div><Input name="Name" required={true} isChecked={this.state.isChecked}></div>
}
export function Input(props: React.PropsWithChildren<{name: string, required?: boolean, isChecked?:boolean}>) {
const [share, setShare] = useState(false);
return <Fragment>
<div>
{props.name}
<span onClick={(event) => {setShare(!share);props.isChecked = share;}}>Selection {props.required ? '(Required)': ''}</span>
</div>
<div className="btn btn--dark btn--margin-left" onClick=
{this.checkField}> Verify</div>
</Fragment>;
}
For Child to Parent Interaction, you should pass a function as prop to the child from parent..
export class Form extends React.Component<FormProps, {
...,
isChecked?: boolean}> {
constructor(props: FormProps) {
super(props);
this.state = {
...,
isChecked:false
};
render() {
return <div>
<Input
name="Name"
required={true}
isChecked={this.state.isChecked}
handleChecked={
(isChecked: boolean) => this.setState({isChecked})
}
/>
</div>
}
export function Input(props: React.PropsWithChildren<{name: string, required?: boolean, isChecked?:boolean, handleChecked?: (isChecked: boolean) => void}>) {
const [share, setShare] = useState(false);
return <Fragment>
<div>
{props.name}
<span onClick={
(event) => {
setShare(!share);
if(handleChecked) {props.handleChecked(share);}
}}>Selection {props.required ? '(Required)': ''}</span>
</div>
</Fragment>;
}
I guess you want to use share in your parent component and if that's the case you must set the state in the parent and pass it to your child as a prop just as you did with isChecked.
Very easy to do you just need to pass a handleChange prop to your child component from the parent component and then utilize it in the child component.
Checkout this code-sandbox