React Error : Cannot read property ‘map’ of undefined

QUESTION:

I am working on a react program which uses axios to get data from a rest api, but when I run the code it gives an error 'Cannot read property 'map' of undefined' on the browser. Please help me resolve this error.

CODE:

import React from 'react';

import axios from 'axios';

export default class UserList extends React.Component {
  state = {
    persons: []
  }

  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(res => {
        const users = res.data;
        this.setState({ users });
      })
  }

  render() {
    return (
      <ul>
        { this.state.users.map(person => <li>{person.name}</li>)}
      </ul>
    )
  }
}

Read more here: https://stackoverflow.com/questions/65700346/react-error-cannot-read-property-map-of-undefined