title: Why my image can't be displayed and is undefined?
body: <p>I would like to display an image which have a src as result of a node function but I only have :
  Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'image_resto'). But if I console.log(RestaurantInformations), I can see that response.data is working correctly.
  Any ideas please ?</p>
  <p>Here is my component:</p>
  <pre><code>import React from 'react';
  import Axios from 'axios';
  import { useEffect, useState } from 'react';
  
  import './gererMonRestaurant.css';
  import errorImage from '../../assets/img/error.png';
  import { Link } from 'react-router-dom';
  
  function GererMonRestaurant() {
  
    const [alert, setAlert] = useState(&quot;&quot;);
    const [UserInformations, setUserInformations] = useState([]);
    const [RestaurantInformations, setRestaurantInformations] = useState([]);
    const [imageRestaurant, setImageRestaurant] = useState(&quot;&quot;);
    const [hasRestaurantCompleted, setHasRestaurantCompleted] = useState(&quot;&quot;);
  
    console.log(UserInformations);
    //console.log(UserInformations[0].id);
    console.log(RestaurantInformations);
    //console.log(RestaurantInformations.data[0].name);
  
    const getUserInfo = async() =&gt; {
      await(Axios.post(&quot;http://localhost:3001/get-user-informations&quot;, {
        mail: sessionStorage.getItem(&quot;email&quot;),
        password: sessionStorage.getItem(&quot;password&quot;),
      })
      .then((response) =&gt; {
        if (response.data.message) {
          setAlert(response.data.message);
        } else {
          setUserInformations(response.data);
          //console.log(&quot;Le serveur me renvoie isRestCompleted = &quot; + response.data[0].isRestaurantCompleted);
          if(response.data[0].isRestaurantCompleted === 0){ // la réponse est 0 donc formulaire d'ajout
            setHasRestaurantCompleted(false);
            //console.log(&quot;hasRestoCompleted = &quot; + hasRestaurantCompleted);
          } else { // la réponse est 1, le restaurant a été renseigné
            setHasRestaurantCompleted(true);
            //console.log(&quot;hasRestoCompleted = &quot; + hasRestaurantCompleted);
          } 
        }
      }));
    }; 
  
    const getInfosRestaurant = async() =&gt; {
      await(Axios.get('http://localhost:3001/get-restaurant-infos', 
      { params: 
        { id: localStorage.getItem('id') } 
      }).then((response) =&gt; {   
        setRestaurantInformations(response.data);
        //console.log(RestaurantInformations.data[0].image_resto);   
        //console.log(response.data[0].id);
        setImageRestaurant('http://localhost:3001/upload/' + RestaurantInformations.data.image_resto);
      }));
    };  
  
  
    useEffect(() =&gt; {
      //console.log(&quot;hello&quot;);
      getUserInfo(); 
      getInfosRestaurant();  
      //console.log(&quot;hasRestCompleted = &quot; + hasRestaurantCompleted);        
    }, []);    
      
     
  
      return(
          &lt;div&gt;
              &lt;div className='mainContainerGererMonResto'&gt;
                  { 
                  hasRestaurantCompleted ? &lt;div className='XXX'&gt;
  
                    Vous avez renseigné un restaurant :
                    &lt;img src={imageRestaurant} alt=&quot;imgRestaurant&quot;/&gt;
  
                  &lt;/div&gt;  
                  : &lt;div className='restoNonRenseigne'&gt; 
  
                      &lt;img className=&quot;errorImg&quot; src={errorImage} alt=&quot;errorImg&quot; /&gt;
                      &lt;p className='whiteCardText'&gt; Aïe ! Vous n'avez pas encore renseigné votre restaurant dans notre base de données. &lt;br&gt;&lt;/br&gt;
                      &lt;Link to='/ajouter-mon-restaurant'&gt;Lancez-vous&lt;/Link&gt; dans l'aventure Foodelivery ! &lt;/p&gt;
  
                    &lt;/div&gt;
                  }      
              &lt;/div&gt;
          &lt;/div&gt;                    
      );
  
  };
  
  export default GererMonRestaurant;
  </code></pre>