Ahora he usado el gancho de estado para ocultar el formulario cuando se carga la página. Y al hacer clic o alternar la radio, puedo mostrar el formulario, pero si vuelvo a alternar la radio, el formulario no se oculta.
Esto es lo que he implementado:
const WelcomeTab = () => { const [toggle, settoggle] = useState(false); return ( <React.Fragment> <Tab.Pane style={{ borderRadius: '7px', padding: '30px', }} attached={false} > <Grid> <Grid.Row> <Grid.Column floated="left" width={8}> <Header style={{ fontSize: '18px', fontFamily: 'Nunito-Regular', color: '#4F4F4F', }} > Welcome Screen </Header> </Grid.Column> <Grid.Column floated="right" width={4}> <Header as="h4" style={{ display: 'flex', justifyContent: 'space-around', marginLeft: '30px', }} > Customize <Radio toggle onChange={() => settoggle({ toggle: !toggle })} /> </Header> </Grid.Column> </Grid.Row> </Grid> {toggle ? ( <Form style={{ paddingTop: '20px' }}> <Form.Field> <label style={lableStyle}>Title</label> <input style={{ marginBottom: '20px' }} /> <label style={lableStyle}>Message</label> <TextArea /> </Form.Field> </Form> ) : null} </Tab.Pane> </React.Fragment> ); }; const lableStyle = { fontFamily: 'Nunito-Regular', fontWeight: 400, color: '#4F4F4F', fontSize: '15px', display: 'inline-block', marginBottom: '10px', }; export default WelcomeTab;intente agregar el gancho useEffect junto con el cambio como se muestra a continuación, ya no necesita {} esta es la sintaxis antigua de setState, usando ganchos hacemos los cambios directamente, espero que esto ayude
useEffect(()=>{},[toggle]) reemplace este código de sintaxis incorrecto, puedo ver que no es json su valor booleano
<Radio toggle onChange={()=>settoggle({toggle: !toggle})}/>como esta es una sintaxis antigua que no funciona con ganchos, intente implementar esto en su lugar,
<Radio toggle onChange={()=>settoggle(!toggle)}/>