I have a screen with a TAB, that TAB is a component and within the TAB there is another component called FORM.
hierarchy:
in this hierarchy, I want to pass the NAME value from the FORM component to the TAB component and then from the TAB component to the SCREEN component.
Code Screen:
export default function Screen() {
return (
<>
<TabProfile me={me} />
</>
);
}
Code TAB:
export default function TabProfile({ me }) {
return (
<div className={classes.root}>
<div className={classes.demo1}>
<AntTabs value={value} onChange={handleChange} aria-label="ant example">
<AntTab label="Config" />
</AntTabs>
</div>
<div>
<TabPanel value={value} index={0}>
<Config me={!me ? [] : me} />
</TabPanel>
</div>
</div>
);
}
Code FORM:
export default function Config({ me }) {
return (
<>
<BoxFormGrid>
<Label>Name</Label>
<Input type="text" value={name} />
</BoxFormGrid>
</>
);
}
You can do this by having a state in your top component. Then you pass the state update function down twice:
import { useState } from 'react'
export default function Screen() {
const [ name, setName ] = useState('me') // 'me' is the start value
return (
<>
<TabProfile me={name} setName={setName} />
</>
);
}
export default function TabProfile({ me, setName }) {
return (...
<Config me={!me ? [] : me} setName={setName} />
...
);
}
export default function Config({ me, setName }) {
return (
<>
<BoxFormGrid>
<Label>Name</Label>
<Input type="text" value={me} onChange={event => setName(event.target.value)} />
</BoxFormGrid>
</>
);
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments