React Native Handle Nested Object with Map and Display

Question

how to handle nested object with map for display on flatlist or text or other component at react native. i tried to display using text and flatlist but didnt work, i want to display like this

this is my code,

const Schedule = () => {
const [resp, setData] = useState([]);
 useEffect(() => {
      const fetchData = async () => {
        const respData1 = await axios(
          `http://sh3ll.my.id/api/data3.json`
        );  
        setData({ data: respData1.data.data });  
      };
        fetchData();
    },[]);

    console.log('render');
    if (resp.data) {
      console.log("d==>", resp);
    }

    return (
       <View style={{paddingTop:20}}>
            { resp.data && resp.data.map((items,i)=> 
                <Text key={i}>{`${items.date} ${items.time}`}
                  {items.list.map((sub)=>{ `${sub.description}`
                  })}
                </Text> 
             ) }
        
        {/* <FlatList data={resp} 
        keyExtractor={(x,i)=>i}
        renderItem={({item})=>
        ....?? }
        /> */}

      </View>
    )
}

export default Schedule

Answer 1

Looking at your code, I assume your data object looks like this:

const resp = {
    data: [
      {
        date: "date 1",
        time: "time 1",
        list: [{ description: "desc 1" }, { description: "desc 2" }]
      },
      {
        date: "date 2",
        time: "time 2",
        list: [{ description: "desc 1" }, { description: "desc 2" }]
      }
    ]
  };

If that's correct, you can flatten your object by calling your own "createDescription" function that will take care of rendering the descriptions:

function createDescription(listItem) {
    return <p>{listItem.description}</p>;
}

  return (
    <table style={{ paddingTop: 20 }}>
      {resp.data &&
        resp.data.map((items, i) => (
          <tr key={i}>
            <td>{items.date}</td>
            <td>{items.time}</td>
            <td>{items.list.map((sub) => createDescription(sub))}</td>
          </tr>
        ))}
    </table>
  );

Now that you have your HTML correctly rendered, you can fix the layout using CSS.