How do I render a single Item fetched from the API ReactJS-CodePudding

I can't seem to figure out how to render the item on my screen

It's there on my console though

Here's my Code:

import React, {useState, useEffect} from 'react'
import axios from 'axios'
import 'bootstrap/dist/css/bootstrap.min.css';


function JobList() {
    const [jobs, setJobs] = useState([])

    useEffect(() => {
        getJobs()
    }, [])

    const getJobs = () => {
        axios.get('https://staging.mapout.com/mapout-node/joblist/monster-jobs', {params: {keyword: 'developer', location: 'india'}})
            .then(response => {
                console.log(response.data.jobs[0])
                const allJobs = response.data.jobs

                setJobs(allJobs)
            })
            .catch(error => console.error(`Error: ${error}`));
    }


    return (
        <div className='container'>
            <h1>{jobs.title}</h1>
            
        </div>
    )
}

export default JobList

I thought this should work but then I thought I'm not maping over it but I don't want to map over it because I want the first item of that array

CodePudding user response：

You forgot to assign the first element in array to allJobs

You forgot [0] at the end here... const allJobs = response.data.jobs[0]

CodePudding user response：

If you console.log(jobs) you can see that you have an array with 32 objects inside.

If you want the first item on the list, try this:

<div className="container">
      {jobs.length > 0 && (
        <>
          <h1>{jobs[0].title}</h1>
          <h1>{jobs[0].company}</h1>
        </>
      )}
    </div>