Using .map in <div> tag - react.js

Question

I would really appreciate any help. So the project is a react project.

Here is what I fetch: fetching a request

Here is what I respond from server: Response from server

I tried on Postman to see what type of json I am receiving. Here is what it returns: Postman test

The problem I am having is that I am unable to map the data received. I want to just show the received data in a nice way on front page once the link is entered.

Is it possible to map it inside div tag? Or is there another way of doing it?

Please note the the project is written as functional component

Answer 1

This is how your component will look

 export default function App() { let data = [{ number: "1", other: "some data" }]; return ( <div> {data.map(item => ( <div>{item.other}</div> ))} </div> ); }

Answer 2

I hardcoded the data outside the function

 import React from 'react' const data = [{ number: "1. ", other: "some data" }]; const SomeData = () => { return ( <div> {data.map(list => ( <li>{list.number}{data.map(item => ( <span>{item.other}</span> ))}</li> ))} </div> ) } export default SomeData

Answer 3

This is a pseudo code, I did not test it, but it will look similar to this:

const MyComponent = () => {
    // the data you retrieved from server
    const data = [
      { number: 1, date: 'today', startTime: '09:00', endTime: '00:00'},
      { number: 12, date: 'today', startTime: '08:00', endTime: '00:00'},
    ]
    
    return(
      data.map(item => (
        <div>{item.number}</div>
      ))
    )
    }

Answer 4

Since, you receive array of objects that you want to display, you can use the array method map to create a list of divs like this:

function createDOM() {
    return data.map(dataItem => {
        <div>
            // Code to display your data
        </div>
    });
}

return (
    <div>
        {createDOM()}
    </div>
)