My react component is not formatting my text from my api call-CodePudding

I've been trying to get data from an api and display it in my React component.

I've finally gotten to a point where it's almost working! I am getting the data from the API but it looks really messy.

It looks like this:

{"data":{"id":3,"title":"Software Dev II","postDate":"2022-06-10T03:11:22.538","department":"Engineering", "jobType":"Mechanical & Maintenance","managerId":"409aa832","financialId":"91","contactPerson":"Mary Herarth"...

I have it in a div like this:

<div>
    {JSON.stringify(jobsData)}
</div>

and the code to get the api data looks like this:

 const getJobs = async (id) => {
    const data = await axios.get('api/openJobs/'   id);
    setJobsData(data);
}

I am getting no errors, just ugly formatting.

Is there a way to tell React to format it so it's readable?

Like:

Job Title: Software Dev II
Posting Date: 2021-06-10
Department: Engineering

etc?

Thanks!

CodePudding user response：

If you know what the format is, you can simply fill it in yourself:

jobsData = jobsData.data;
<div>
    <p>Job Title: {jobsData.title}</p>
    <p>Posting Date: {jobsData.postDate}</p>
    <p>Department: {jobsData.department}</p>
</div>

CodePudding user response：

HTML changes all extra spaces into a single space. You can wrap the text in <pre> (which doesn't have such behavior):

<div>
  <pre>{JSON.stringify(jobsData)}</pre>
</div>