Print all elements of fetched data array in react

Question

Hey I am a beginner in react trying to make my first full stack app, I am fetching data from mongodb using axios and storing data in fetchedjobs array. Jobtitle array only has the title property of the fetchedjobs and I want to print all the entries but not able to. For now I am printing these elements by hard coding the indexes {this.state.jobtitle[0]} . Please Help

class FindJob extends Component{
    constructor(props){
        super(props);
        this.state={
            fetchedjobs:[],
            jobtitle:[],
        }

    }

    componentDidMount(){
        axios.get(' http://localhost:4002/api/findjob')
            .then(res=>{
                this.setState({
                    fetchedjobs:res.data
                })
                let jobtitle=[]
                this.state.fetchedjobs.map(fetchedjob=>
                    jobtitle.push(fetchedjob.jobtitle)
                )
                console.log(jobtitle[0])
                this.setState({
                    jobtitle
                })
            
            })
    }
    render(){
        return(
            <div className="content">
                <h5>{this.state.jobtitle[0]}</h5>
            </div>
        );
    }
}
export default FindJob;

fetched json

[
    {
        "_id": "600469700459a40c088f3dde",
        "jobtitle": "swe",
        "company": "ibm",
        "officelocation": "ggn",
        "jobtype": "Part Time",
        "publisher": "sid",
        "date": "2021-01-17T16:44:32.084Z",
        "__v": 0
    },
    {
        "_id": "600469aa0459a40c088f3ddf",
        "jobtitle": "janitor",
        "company": "cisco",
        "officelocation": "delhi",
        "jobtype": "Full Time",
        "publisher": "tanmya",
        "date": "2021-01-17T16:45:30.218Z",
        "__v": 0
    },
    {
        "_id": "60046ae8b95ae81c14278f9e",
        "jobtitle": "fljdk",
        "company": "ndkf",
        "officelocation": "mdfkfm",
        "jobtype": "Part Time",
        "publisher": "tanmya",
        "date": "2021-01-17T16:50:48.311Z",
        "__v": 0
    }
]

Answer 1

You can create sync call in setState method and try it,

axios.get(' http://localhost:4002/api/findjob')
    .then(res=>{
        this.setState({ fetchedjobs:res.data }, () => {
            let jobtitle=[]
            this.state.fetchedjobs.map(fetchedjob=>
                jobtitle.push(fetchedjob.jobtitle)
            )
            this.setState({ jobtitle})
        })
    })

Answer 2

Try this:

render(){
        return(
            <div className="content">
               {this.state.jobtitle.length?this.state.jobtitle.map((item)=>{
                return <h5>{item._id}</h5>    //here you can display any property that you wish to
                })
    :null}
            </div>
        );
    }