JIYIK CN >

In React, square brackets are used to get the first element of an array, e.g. const first = arr[0];the array element with index 0 is the first element in the array. If the array is empty, undefinedthe value is returned.

import {useState} from 'react';

const App = () => {
  const [state, setState] = useState([
    {id: 1, name: 'Alice'},
    {id: 2, name: 'Bob'},
  ]);

  const first = state[0];

  return (
    <div>
      <h2>id: {first?.id}</h2>
      <h2>name: {first?.name}</h2>
    </div>
  );
};

export default App;

We access the element at index 0 to get the first element of the array.

Indexes in JavaScript are zero-based, so the first element in an array has index 0 and the last element has index arr.length - 1.

请注意?., we used the optional chaining operator when accessing the property of the array element at index 0 .

If the reference is null ( null or undefined ), the optional chaining ?.operator short-circuits.

In other words, if the first variable stored an undefined value, we will short-circuit instead of trying to access a property of an undefined value and getting a runtime error.

We can also use if statements.

import {useState} from 'react';

const App = () => {
  const [state, setState] = useState([
    {id: 1, name: 'Alice'},
    {id: 2, name: 'Bob'},
  ]);

  const first = state[0];

  // 👇️ Make sure first is not undefined
  if (first != undefined) {
    console.log(first.id);
    console.log(first.name);
  }

  return (
    <div>
      <h2>id: {first?.id}</h2>
      <h2>name: {first?.name}</h2>
    </div>
  );
};

export default App;

This is necessary unless we are sure the array is not empty.

If we try to access an array at an index that doesn't exist, we will get an undefined value.

const arr = [];

console.log(arr[0]); // 👉️ undefined

If we try to access a property or call a method on an undefined value, we will receive a runtime error.