useEffect y luego pongo los datos en un estado. Esta parte funciona bien. const [profile, setProfile] = useState("") useEffect(() => { // Get user profile data from firestore.. setProfile(userData) }, []) const defaultGender = profile.gender const [gender, setGender] = useState(defaultGender) <input onChange={e => setGender(e.target.value)} type="radio" id="Man" name="gender" value="Man" checked={defaultGender === "Man"} /> <label htmlFor="Man">Man</label> <input onChange={e => setGender(e.target.value)} type="radio" id="Woman" name="gender" value="Woman" checked={defaultGender === "Woman"} /> <label htmlFor="Woman">Woman</label> El problema es que, con este código, console.log(gender) devuelve undefined y no puedo verificar (seleccionar) un género diferente ya que está atascado en Hombre.
Parece que solo necesitas:
gender del estado (no defaultGender ) para la propiedad de la entrada checked .gender después de la actualización del estado del profile . const { useState, useEffect, Fragment } = React; const Form = () => { const [profile, setProfile] = useState({}); const [gender, setGender] = useState(profile.gender); useEffect(() => { // Assuming you have an async request here... const profile = { gender: "Woman" }; setProfile(profile); setGender(profile.gender); }, []); return ( <Fragment> <input onChange={(e) => setGender(e.target.value)} type="radio" id="Man" name="gender" value="Man" checked={gender === "Man"} /> <label htmlFor="Man">Man</label> <input onChange={(e) => setGender(e.target.value)} type="radio" id="Woman" name="gender" value="Woman" checked={gender === "Woman"} /> <label htmlFor="Woman">Woman</label> </Fragment> ); }; ReactDOM.render(<Form />, document.body); <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>