El error lo tienes en este bucle:
for (let i = name.length; i <= 4; i++) {
console.log(name[i]);
}
Le estás ordenando al bucle for
que empiece a contar desde name.lenght
(que vale 50) hasta que i
valga 4 o menos. Naturalmente nunca entra en el bucle dado que i
siempre vale más de 4.
De todas formas, te propongo que eches un vistazo al siguiente código, donde "cortamos" el array con slice
dentro del fetch
, con lo que ya no tienes que utilizar el bucle for
:
const App = () => {
const [mangas, setMangas] = React.useState([]);
React.useEffect(() => {
fetch("https://api.jikan.moe/v3/top/manga")
.then(res => res.json())
.then(res => {
if (res.top) {
// Pasamos unicamente los primeros 10 mangas
setMangas(res.top.slice(0, 10))
} else {
throw new Error('Los datos remotos son incompletos.')
}
})
.catch(e => {
// Mostramos el error en la consola.
// Aquí también podemos mostrar información del error al usuario
console.trace(e)
})
}, []);
return <ul>
{mangas.map(manga => (
<li key={manga.mal_id}>
{manga.title}
</li>
))}
</ul>
};
ReactDOM.render(
<App />,
document.getElementById('root')
);
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<div id="root"></div>