TypeError: utilData.map is not a function issue-CodePudding

I have the following code within my React component:

  const [utilData, setUtilData] = useState([]);

  useEffect(() => {    
      ws.current.onmessage = e => {
          const data = JSON.parse(e.data);
          console.log("data: ",data);
          setUtilData(data)          
      };
  }, []);

The console.log of data returns the following information, which should be stored within the utilData state.

[
    {
        "env_name": "the-matrix",
        "score_one": 24,
        "memory": 1024,
        "cpu_temp": 66.4
    }
]

The issue that I am not sure about and can't see what I am doing wrong, is when I attempt to access each property using the .map array method over utilData, i.e:

  return (
    <div>
        {
          utilData.map((data, i) => (
            <span>{data.env_name}</span>
          ))
        }

    </div>
  )

I am getting the error: TypeError: utilData.map is not a function and unsure why

CodePudding user response：

update return below snippet, since initially utildata might ben ull

return (
    <div>
        {
          utilData ? utilData.map((data, i) => (
            <span>{data.env_name}</span>
          )) : null
        }

    </div>
  )