JIYIK CN >

Looping over an object in React:

1. Use Object.keys()the method to get an array of object keys.
2. Use map()the method to iterate over the array of keys.

export default function App() {
  const employee = {
    id: 1,
    name: '迹忆客',
    salary: 123,
  };

  return (
    <div>
      {/* 👇️ iterate object KEYS */}
      {Object.keys(employee).map((key, index) => {
        return (
          <div key={index}>
            <h2>
              {key}: {employee[key]}
            </h2>

            <hr />
          </div>
        );
      })}

      <br />
      <br />
      <br />

      {/* 👇️ iterate object VALUES */}
      {Object.values(employee).map((value, index) => {
        return (
          <div key={index}>
            <h2>{value}</h2>

            <hr />
          </div>
        );
      })}
    </div>
  );
}

We use Object.keysthe method to get an array of the object's keys.

const employee = {
  id: 1,
  name: '迹忆客',
  salary: 123,
};

// 👇️ ['id', 'name', 'salary']
console.log(Object.keys(employee));

// 👇️ [1, '迹忆客', 123]
console.log(Object.values(employee));

We can only call the get method on arrays map(), so we need to get either the array of object keys or the value of the object.

The function we pass to Array.mapthe method will be called with each element in the array and the index of the current iteration.

We used an index on the key in our examples prop, but if you have a stable, unique identifier, it's better to use that.

When iterating over an object's keys, it is safe to use the object's key for the key prop, since keys within an object are guaranteed to be unique.

export default function App() {
  const employee = {
    id: 1,
    name: '迹忆客',
    salary: 123,
  };

  return (
    <div>
      {/* 👇️ iterate object KEYS */}
      {Object.keys(employee).map(key => {
        return (
          <div key={key}>
            <h2>
              {key}: {employee[key]}
            </h2>

            <hr />
          </div>
        );
      })}
    </div>
  );
}

However, if we are iterating over the values ​​of an object, we cannot safely use the value of the key property unless we can be sure that all values ​​in the object are unique.

React uses the key prop internally for performance reasons. It helps the library ensure that only array elements that have changed are re-rendered.

Having said that, unless we are dealing with thousands of array elements, we won't see any noticeable difference between using indices and stable unique identifiers.

Looping over object values ​​in React:

1. Use Object.values()the method to get an array of object values.
2. Use map()the method to iterate over an array of values.

export default function App() {
  const employee = {
    id: 1,
    name: '迹忆客',
    salary: 123,
  };

  return (
    <div>
      {/* 👇️ iterate object VALUES */}
      {Object.values(employee).map((value, index) => {
        return (
          <div key={index}>
            <h2>{value}</h2>

            <hr />
          </div>
        );
      })}
    </div>
  );
}

We use Object.valuesthe method to get an array of object values.

const employee = {
  id: 1,
  name: '迹忆客',
  salary: 123,
};

// 👇️ [1, '迹忆客', 123]
console.log(Object.values(employee));

If we only want to render the values ​​of the object, we can access them directly using this method.

We can also use Object.entriesthe method, which returns an array of arrays of key-value pairs.

export default function App() {
  const employee = {
    id: 1,
    name: '迹忆客',
    salary: 123,
  };

  console.log(Object.entries(employee));

  return (
    <div>
      {Object.entries(employee).map(([key, value]) => {
        return (
          <div key={key}>
            <h2>
              {key}: {employee[key]}
            </h2>

            <hr />
          </div>
        );
      })}
    </div>
  );
}

Here is Object.entries()what the output of the method looks like.

const employee = {
  id: 1,
  name: '迹忆客',
  salary: 123,
};

// 👇️ [
//      ['id', 1],
//      ['name', '迹忆客'],
//      ['salary', 123],
// ]
const result = Object.entries(employee);
console.log(result);

This method returns an array containing a sub-array of key-value pairs.

Another approach is to use Array.forEach()the method to iterate over the keys of the object and push the JSX elements into an array, which we will then render.

export default function App() {
  const employee = {
    id: 1,
    name: '迹忆客',
    salary: 123,
  };

  const results = [];

  Object.keys(employee).forEach(key => {
    results.push(
      <h2 key={key}>
        {key}: {employee[key]}
      </h2>,
    );
  });

  return (
    <div>
      {results}
    </div>
  );
}

The method is called for each key Array.forEach(), but forEach()the method returns undefined , so we can't use it directly in JSX code.

Instead, we push the JSX element into the array we render.

注意, which is a more indirect approach that we won't see used often in React applications.