Unable to access nested object from JSON data-CodePudding

I have the following function component in React:

function GetData() {
  const [randomDataJSON, setRandomDataJSON] = useState('');
  const url = 'https://randomuser.me/api/';

  const getData = () => {
    axios
      .get(`${url}`)
      .then((results) => {
        const userData = results.data.results;
        setRandomDataJSON(JSON.stringify(userData, null, 2));
      })
      .catch((err) => console.error(err));
  };

  return (
    <div>
      <h3>GetData Component</h3>
      <pre>{randomDataJSON[0].name.first}</pre>
      <button onClick={getData}>Get Data</button>
    </div>
  );
}
export default GetData;

The JSON data from the API is as follow:

[
  {
    "gender": "female",
    "name": {
      "title": "Miss",
      "first": "Barbara",
      "last": "Sullivan"
    }, 
...

I would like to access and display the first name of the JSON data from the API by using {randomDataJSON[0].name.first in the <pre> tag. However, I keep getting the following error message: TypeError: Cannot read properties of undefined (reading 'name')

CodePudding user response：

You are setting json string to randomDataJSON state variable, and trying use JSON string as an object. You can try to console.log(randomDataJSON) to confirm my suspicions.

I think you should not convert your data object to json in first place, so setRandomDataJSON(JSON.stringify(userData, null, 2)); will be setRandomDataJSON(userData);

function GetData() {
  const [randomData, setRandomData] = useState('');
  const url = 'https://randomuser.me/api/';

  const getData = () => {
    axios
      .get(`${url}`)
      .then((results) => {
        const userData = results.data.results;
        setRandomData(userData, null, 2);
      })
      .catch((err) => console.error(err));
  };

  return (
    <div>
      <h3>GetData Component</h3>
      <pre>{randomData[0].name.first}</pre>
      <button onClick={getData}>Get Data</button>
    </div>
  );
}
export default GetData;

CodePudding user response：

At the time the page loads axios wouldn't have ran to request the array so randomDataJSON is a string at that time. You could do

const [randomDataJSON, setRandomDataJSON] = useState([]);

Above you set it to an empty array then check if it has length

<pre>{randomDataJSON.length > 0 && randomDataJSON[0].name.first}</pre>