In ReactJS, facing problem in rendering the data from an API due to its odd structure

This is my code:

import React, { useState, useEffect } from "react";
import axios from 'axios';

function App() {

  const [arrName, setName] = useState();

  useEffect(() => {
        .then( response => {
          // console.log( )
          setName( )
  }, [])

  const foo = () => {
    // following two console statements need not to be in the code. I am putting them only to show the structure of API


      Hi,  I'm the component 
      <button onClick={foo}> console </button>    

export default App;

Console response screenshot

Console response screenshot

I want to simplify the following statement. So that I can easily iterate the API and print anything from the API. However, I am printing only an id here.


Following command breaks the code

<div>[0] => <li>{item._id}</li> ) }

Kindly, Help me what changes should I make to my code.


Based on the replied comment, you would do it like so:

arrName?.data && => (
      { => (
        <li> {chidlItem._id} </li>

The ? is Optional Chaining which is to check if the reference in the chain is valid, so it will skip the map function if arrName or is null/undefined