I am trying to populate Data from my API into my react form. When i console.log my get statement. I can see the array with the information which means my get is getting the information.

Image of my console log showing my array of data.

Now the issue is trying to use this array that i get back to populate fields- without specifying the array number.

'use client'

import {useEffect, useState } from 'react';
import Axios from "axios";

export default function Page() {
    const [user, setUser] = useState([])

const fetchData = () => { Axios.get('http://localhost:5000/api/v1/users', {
        headers: {
          'Content-Type': 'application/json'
        }, 
      }). then((res) => 
        {
            setUser(res.data)
            console.log(res.data)
        });
    }

   return (
        <div className='tutorial'>
            <h1 className='mb-4 text-2xl'>Data Fetching in React</h1>
            <button onClick={fetchData}>Search</button>
            
            <h2> Base: {JSON.stringify(data)}</h2>
            
        </div>
    )

I am going to need the information inside of the array so i can for example. Populate a dropdown or populate a name field by user from the API.

I have tried mapping and keying but i was not able to get what i needed. I also did try to

headers: {'Content-Type': 'application/json'},

I feel like i am close but i just cannot get my data to show up and use it without specifying the array number. EX: Data[0] or Data[1]. I want all my data back.

I want to get to an end Goal where i can say for a field i want “data.firstName” and When i hit the search button I can get the firstname for either user.