• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

126
Vistas
My react component is not formatting my text from my api call

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!

almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

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>
almost 3 years ago · Juan Pablo Isaza Denunciar

0

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>
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda