How to map data that we get from database to UI?

I have a Redux action function called getAllJob which is supposed to get all jobs informations (title and description) from database:

export const getAllJob = (callback) => {
    //make checks and get some data
    return () => {
        axios.get("http://localhost:5000/api/form/listjob")
            .then((response) => {
                const { data } = response;
                callback(response.data.data);
                if (data.status === "FAILED") {
                    const { message } = data;
                    console.log(message);
                }
            })
            .catch(err => { console.error(err) });
    }
}

Now i need to map this response.data.data to UI to be rendered so i get a list of jobs with titles and descriptions for each one from database. For that, i tried the below code but it doesn’t work:

//show title only of job from data
<h1>
  {response.data.data.map((data, i) => {
     return({response.data.data.title})
  })}
</h1>

Kindly can you help me achieve my goal?

Update:

adding console.log(response), shows this:

{
    "data": {
        "success": true,
        "message": "Jobs fetched successfully!",
        "data": [
            {
                "_id": "62b442f01fd1bd2901cccd27",
                "title": "This is job title",
                "description": "This is the job description",
                "createdAt": "2022-06-23T10:39:44.250Z",
                "updatedAt": "2022-06-23T10:39:44.250Z",
                "__v": 0
            }
        ]
    },
    "status": 200,
    "statusText": "OK",
    "headers": {
        "content-length": "257",
        "content-type": "application/json; charset=utf-8"
    },
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {
            "FormData": null
        },
        "headers": {
            "Accept": "application/json, text/plain, */*"
        },
        "method": "get",
        "url": "http://localhost:5000/api/form/listjob"
    },
    "request": {}
}

Answer

Try setting you response as a state variable which you can then loop through.

const [apiData, setApiData] = useState([]);

  useEffect(() => {
    axios
      .get("http://localhost:5000/api/form/listjob")
      .then((res) => {
        setApiData(res.data.data);
      })
      .catch((err) => console.log(err));
  }, []);

And then for mapping:

<div>
  {apiData.map((data, i) => (
     <h1>{data.title}</h1>
  ))}
</div>

Note: If this doesn’t work, provide us the logged response from the api call.

Advertisement

Answer