Why can't I get it as an object (abonnes) from result Getelementbyid?

Question

Why can't I get it as an object (abonnes) from result Getelementbyid? I get the element on JSON.

function Abonnes() {
  const [abonnes, setAbonnes] = useState();

  const getOneAbonnes = (id) => {
    Axios.get(`http://localhost:4000/api/getonea/${id}`).then((response) => {
      setAbonnes(response.data);
      console.log(abonnes); // undefined
    });
  };
}

Answer 1

because that's how your api is set it returns a JSON file, you can just parse it and you"re ready to go

Axios.get(`http://localhost:4000/api/getonea/${id}`).then((response)=>{
        
        setAbonnes(JSON.parse(response.data));                          
        console.log(abonnes); // this won't log the value you just set that is not how state works       
})

 useEffect(() => {
     console.log(abonnes)//this will log abonnes whenever abonnes value changes
  }, [abonnes])

Answer 2

function EditAbonnes() { 

    let history = useHistory();
    const { id } = useParams();
    /* alert(id); */

    const [nom, setNom] = useState('')
    const [prenom, setPrenom] = useState('')
    const [courriel, setCourriel] = useState('')

     
    const [abonnes, setAbonnes] = useState({
        courriel: "",
        id_Abonnes: "",
        nom: "",
        prenom: ""
        
    });
         
    useEffect (()=>{loadAbonnes();}, []);

    const loadAbonnes = async () =>{

        const result = await Axios.get(`http://localhost:4000/api/getonea/${id}`)

        console.log(result.data);
        /* i have an array with one object on my console /*

        setAbonnes(result.data);
                     
        console.log(abonnes);
        /* abonnes is empty   /*
        
        console.log(abonnes.nom); 
        /*empty string /* 
        
    }

return(        );} export default EditAbonnes