title: TypeError: Cannot read property 'data' of undefined - can't access Object "props" beyond certain level in Reactjs
body: <p>I'm making an API call in via <code>axios</code> in <code>React</code> with a <code>UseEffect</code>.<br/>
  We set the response to a variable called <code>data</code> using <code>useState</code></p>
  
  <pre class="lang-js prettyprint-override"><code>const [data, setData] = useState({});
    setData(response);
  </code></pre>
  
  <p>The response is from NASA API and we only get one object (pasted below) returned for this call.<br/></p>
  
  <p>Since I named the response "data" and it has a "data" key as well, if I want to log the url, I know I would type <code>console.log(data.data.url)</code> and that works smoothly in my <code>app.js</code> main function. In my <code>card.js</code> component, I can successfully log <code>console.log(data)</code> and <code>console.log(data.data)</code> and it gives exactly what you would expect, but when I <code>console.log(data.data.url)</code> or <code>(data.data.title)</code> it becomes for some reason <code>undefined</code>, so then this results in a big error in the return function of JSX and the site won't load:</p>
  
  <pre class="lang-js prettyprint-override"><code> TypeError: Cannot read property 'data' of undefined error.
  </code></pre>
  
  <p>I don't think I'm doing anything wrong with my naming as it works fine at higher levels in the object e.g. <code>console.log(data.data)</code> works and I see before my eyes the next level properties listed. </p>
  
  <p>I am literally console.logging this:</p>
  
  <pre class="lang-js prettyprint-override"><code>{console.log('FROM INSIDE THE RETURN')}
  {console.log(props.data)}  // works, displays object {}
  {console.log(props.data.data)}  //works, displays object one level lower   
  {console.log(props.data.data.url)}  // type error. You name the property.
  </code></pre>
  
  <p>Needless to say this doesn't work, which was my first approach to the assignment:  </p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;img src={props.data.data.url}/&gt;
  </code></pre>
  
  <p>That said we got the program working with help of the team lead by shaving off the top layer of the object upstream as follows:</p>
  
  <pre class="lang-js prettyprint-override"><code>SetData(response.data)
  
  // as opposed to 
  SetData(response)
  
  // and then using 
  &lt;img src={props.data.url}/&gt;
  </code></pre>
  
  <p>So we didn't have to reach to the bottom in the props, but for clarity, I want to know why and what difference it makes to the compiler, particularly when it worked fine up to n-1 layers, where n is the number of layers of the object.</p>
  
  <p>I even changed the name of one of the data variables so 'data' wasn't duplicated and the behavior was the same. </p>
  
  <p>Thank you for your help and insights! I really appreciate any insights you can share as well as feedback on my question. </p>
  
  <p>Here is the object I'm working with. </p>
  
  <pre class="lang-js prettyprint-override"><code>     {
          data: {
              copyright: "Bryan Goff",
              date: "2020-03-18",
              explanation: "What's happening behind...[truncated]...Florida, USA.",
              hdurl: "https://apod.nasa.gov/apod/image/2003/AntiCrepRays_Goff_3072.jpg",
              media_type: "image",
              service_version: "v1",
              title: "Anticrepuscular Rays over Florida",
              url: "https://apod.nasa.gov/apod/image/2003/AntiCrepRays_Goff_960.jpg"
          },
          status: 200,
          statusText: "OK",
          headers: {
              contenttype: "application/json"
          },
          config: {
              url: "https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY",
              method: "get",
              headers: {
                  Accept: "application/json, text/plain, */*"
              },
              transformRequest: [
                  null
              ],
              transformResponse: [
                  null
              ],
              timeout: 0,
              xsrfCookieName: "XSRF-TOKEN",
              xsrfHeaderName: "X-XSRF-TOKEN",
              maxContentLength: -1
          },
          request: {}
      }
  </code></pre>