Como mencioné en el título, mi pantalla se vuelve blanca al llamar a la API por primera vez, pero cuando actualizo e ingreso el valor, funciona correctamente.
en la consola, el error es: TypeError no detectado: Value.map no es una función
const [data, setData] = useState({}); const [user, setUser] = useState(""); const [Value, setValue] = useState(""); const APIurl = async () => {await axios.get(`https://api.github.com/users/${user}`).then((response) => { setData(response.data); console.log(response.data); });}; const APIurl1 = () => { axios.get(`https://api.github.com/users/${user}` + `/repos`).then((response) => { setValue(response.data); console.log(response.data); }); }; const handleKey = (e) => { if (e.key === "Enter") { APIurl();APIurl1();}}; return ( <> <div className="bbody"> <input id="search-bar" onChange={(event) => setUser(event.target.value)} placeholder="Enter User" type="text" onKeyPress={handleKey} /> {!data.name ? ( <div> <p className="errorMsg">No Data Found</p> </div> ) : ( <> <div className="inner-img"> <img src={data.avatar_url} alt="" /> <h2>{data.name}</h2> <p>{data.bio}</p> <div id="repos"> {Value.map((value) => { return ( <a key={value.id} href={value.html_url} target="_blank"> <button id="repos-link">{value.name}</button> </a> ); })} ``` I m trying to get Github profile of a person by inputting name in the input field and extracting the info from the API.Porque el estado inicial de Value es una cadena vacía. No hay nada allí, así que no hay nada que mapear. Cuando usa setValue después de escribir la entrada, su estado se actualiza para reflejar lo que haya escrito, por lo que solo entonces puede mapear Value .
Debe verificar si hay Value , agregar Value && así:
{Value && Value?.map((value) => { return ( <a key={value.id} href={value.html_url} target="_blank"> <button id="repos-link">{value.name}</button> </a> ); })}