TypeError: Cannot read property 'data' of undefined - can't access Object "props" beyond certain level in Reactjs

My guess is the api call is taking some time and you are trying to set the values before the api call returns . Please try to use a additional isLoading state to check if the api is still executing

import React from 'react';

const Component = () => {  
const [isLoading,setIsLoading] = useState(true)
const [data, setData] = useState({});

useEffect(()=>{
  setTimeout(()=>fetch('https://jsonplaceholder.typicode.com/users/1')
    .then(response => response.json())
    .then(json => {        
        setData(json)
      setIsLoading(false)        
    }),1000)

},[0])


return(
  isLoading ? 'Loading...' :
    <div>
      <h1>Hello {data.name}!</h1>
      <p>Your username is {data.username}</p>
    </div>
  )
}

export default Component

This is indeed an interesting challenge.
Let's do step-by-step analysis and see if we'll agree:

// this initializes `data = {}` when the app first launches
const [data, setData] = useState({});

// Chances are, you are using this within the "useEffect"
// If so at that point, the above `data = response`
setData(response)

You are most likely making the axios NASA API call within the useEffect.
So then, let's narrow down to the API call.

API calls are often asynchronous (non-blocking).
In other words, this data fetching process doesn't block your client-side from doing other "activities". With that out of the way, let square back to your shared code:

Explanation 1: It might be an occurrence while we are fetching data

// works, because initially "data = {}"
{console.log(props.data)}

// works, displays object one level lower
{console.log(props.data.data)}
// Explaining this...
// APIs are often backend apps that query a database for actual data. 
// This returned data is stored in "literals" (often arrays/lists/objects).

// type error. You name the property.
{console.log(props.data.data.url)}
// Based on the above explanation, 
// despite the second `data` being an Object literal, 
// "url" isn't yet defined since the API is still "querying" the database

Explanation 2: It might be a namespace conflict

// If all is fine based on "explanation 1", 
// then this could be a "namespace" conflict during compilation.

// At compilation, JS finds two variables named "data"
// 1. The initial data value, 
   data = {}
// 2. The returned data key,
   {
     data: {...},
   }
// If we had a returned response as follows:
   results = {
     data: {...},
   }
// we probably would have something like this working 
{console.log(response.data.result.data.url)}

// And this might explains why these work...
{console.log(response.data.url)}
<img src={props.data.url}/>

Remember, we are dealing with stubborn JavaScript here.
And that's possibly why many big Reactjs projects increasing now involve TypeScript.