Can not store json obj in state when i use useEffect to get an object from an API - json

Question

Im trying to show an object's properties on a modal, but nothing seems to happen after i fetch it. I've tried without using the useEffect hook, and it does store the item but then i cant access the properties, i asked about it, and a user told me to use use Effect. But now, nothing seems to be stored...
This is my code:
import React, {useState, useEffect } from 'react';
const Modal = ({ handleClose, show, id }) => {
const showHideClassName = show ? "mod displayBlock" : "mod displayNone";
const [peliSeleccionada, setPeli] = useState([]);
useEffect(() => {
fetch(`http://localhost/APIpeliculas/api/pelicula/read_single.php/?ID=${id}`)
.then(res => res.json())
.then(
result => {
alert(result); //the alerts dont even pop up
setPeli(result);
alert(peliSeleccionada);
});
}, []);
return (
<div className={showHideClassName}>
<section className="mod-main">
<h5>EDITAR: </h5>
<label>
{ peliSeleccionada.Nombre }
</label>
<div className="btn-grupo">
<button type="button" className="btn btn-success btn-lg btn-block">Guardar cambios</button>
<button onClick={handleClose} type="button" className="btn btn-secondary btn-lg btn-block">Cerrar</button>
</div>
</section>
</div>
);
};
export default Modal;
The alerts i put inside my useEffect function dont even pop up, and i also get this error on the console as soon as i enter the page:
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
Also I want to access my object's properties, which are: ID, Nombre, Categoria, and Director. Is this the correct way to do it? { peliSeleccionada.Nombre }

Answer 1

useEffect is run after the component renders, similarly to how componentDidMount works.
What this means, putting it very simply, is that the component will return and then fire the fetch.
There is an issue with your peliSeleccionada state, you declare it as an array but call peliSeleccionada.Nombre like if it was an object. This means that on first render it will print undefined for the peliSeleccionada.Nombre.
An approach to have this is to pair it with a loading state.
const Modal = () => {
const [loaded, setLoading] = useState(true);
const [peliSeleccionada, setPeli] = useState({});
useEffect( () => {
fetch()
.then(res => {
setPeli(res) // parse this accordingly
}) // or chain of thens if needed
.catch(err => {
setLoading(false);
console.log(err) // something failed in the fetch. You could have another state to mark that the fetching failed; close the modal, show an error, etc.
})
}, [])
if(!loaded) return 'Loading...'
return (<div>Data goes here</div>) // be careful if the fetch failed, it won't show data!
}
Last but not least, the error is happening in the fetch and the message states exactly that, that you are not catching it. If it is in the fetch call, the above code works. If it is in a parsing, it might require a try/catch around the useEffect