0xhjohnson

22.02.2019React

How to Loop with React JSX

The map() method can be used directly in JSX which is concise and declarative in comparison to any for loop or variation thereof. Below, we are looping through the array of users and return all of the user list item elements. Be sure to include the key property to help React identify which items have changed in some way.

render() {
  const users = ['John', 'Dan', 'Jenny'];
  return (
    <ul>
      {users.map((name, index) => {
        return <li key={index}>{name}</li>;
      })}
    </ul>
  );
}

Recent posts