Is return value of a array "undefined" in React?

I know its basic but i am stuck with the following bug or error. Need help

I am trying to use simple array method to return value on console and on screen using basic methods in react but it is giving me undefined error on console.

Following are the code of React of APP.js.

import React from 'react'

function App(){

  const [employees, setemployees] = React.useState([{
    id: 1,
    fullName: "Bob Jones",
    designation: "JavaScript Developer",
    gender: "male",
    teamName: "TeamA"
  },
  {
    id: 2,
    fullName: "Jill Bailey",
    designation: "Node Developer",
    gender: "female",
    teamName: "TeamA"
  },
  {
    id: 3,
    fullName: "Gail Shepherd",
    designation: "Java Developer",
    gender: "female",
    teamName: "TeamA"
  }]);

console.log(employees.fullName)
  return( 
    <main>
        <h1>{employees.fullName}<h1/>
    </main>
  )
}

export default App

Output:
Console: Undefined
On Screen: empty

Need help how to solve this error.

I tried different known methods like moving into components but does not work. I am expecting to show data on screen and on console.

it must be error. because you can't access employees.fullName. it must be at least employees[0].fullName to access first object inside employees array.

console.log(employees[0].fullName);

if you want to render all names as an h1 you can do this.

{employees.map(employee => <h1 key={employee.id}>{employee.fullName}</h1>)}

The error message you're encountering is likely "Cannot read property 'fullName' of undefined." This is because employees is an array of objects and not a single object, so trying to access a property like fullName directly on employees will not work.

To fix this, you need to loop over the employees array and render each individual employee. One way to do this is by using the map function to iterate over the array and create a new array of elements for each employee.

employees[0].fullName

should do it

Can you please give more details? btw, have you tried to write something like:

<div>
 <ol> 
{employees.map(employee => { <li key={employee.fullName}>{employee.fullName}</li>)} 
</ol> 
</div>