How can I fix 'Cannot read properties of undefined' error when accessing prop values in a child component in React?

I'm trying to access the value of a array fileList that I pass as a prop to a component <FileDisplay prop={filesList}/>, but when I try to read a property of the array {JSON.stringify(props.prop[0].name)} I get an error:

> Cannot read properties of undefined (reading 'name')
TypeError: Cannot read properties of undefined (reading 'name')

but I can read JSON.stringify(props.prop[0]) without getting any errors.

Also, if I first run the code with {JSON.stringify(props.prop[0].name)} commented out and then uncomment it and save the code, react compiles again and I am able to read the value of props.prop[0].name.

From my understanding, the code is trying to read the props.prop[0].name before the promise returns and filesList value is set. Is there a way to fix this?

export default function Home() {

    const { user, setUser } = useContext(UserContext);
    const [ filesList, setFilesList ] = useState([])

    useEffect(() => {
      const getData = async () => {
        const listFiles = await listAll(ref(storage, 'files'))
        const data = await  Promise.all(listFiles.items.map(async (itemRef) => {
          const response = getMetadata(ref(storage, 'files/'+ itemRef.name))
          return response
        }))
        setFilesList(data)
      }
      getData()
    }, [])

 return (
    <div>
      
      <div>
        <FileDisplay prop={filesList}/>
      </div>
      
    </div>
    
  )

export default function FileDisplay(props) {    
  return (
    <div>
       <h2>LIST OF FILES</h2>
        <p>{JSON.stringify(props.prop)}</p>
        <p>-----------------------</p>
        <p>{JSON.stringify(props.prop[0])}</p>
        <p>-----------------------</p>
        <p>{JSON.stringify(props.prop[0].name)}</p>
    </div>
  )
}

I've tried to read the variable but I still can't access the properties

Your issue may be related to timing, specifically, the FileDisplay component is being created before the filesList state has been populated.

The getData method is async so your component will continue to load while it waits for a response. This means the FileDisplay component is likely to be initially created with a props value equal to [] (fileList default value) which will result in props.prop[0] returning undefined.

I would suggest loading the FileDisplay component conditionally:

Replace

<FileDisplay prop={filesList}/>

with

{filesList.length && <FileDisplay prop={filesList}/>}

This assumes that fileList will always have at least one element. If this is not the case then you should replace the filesList.length check with another state variable that indicates the fetch of files has completed. e.g.

const [ isFetching, setIsFetching ] = useState<boolean>(true)

then within getData set setIsFetching(false) just before setFilesList(data)

You would also need to modify the FileDisplay component to handle an empty array in props parameter.