what is right way to do API call in react js?

In this case, you can do ajax call inside componentDidMount, and then update state

export default class UserList extends React.Component {  constructor(props) {    super(props);    this.state = {person: []};  }  componentDidMount() {    this.UserList();  }  UserList() {    $.getJSON('https://randomuser.me/api/')      .then(({ results }) => this.setState({ person: results }));  }  render() {    const persons = this.state.person.map((item, i) => (      <div>        <h1>{ item.name.first }</h1>        <span>{ item.cell }, { item.email }</span>      </div>    ));    return (      <div id="layout-content" className="layout-content-wrapper">        <div className="panel-list">{ persons }</div>      </div>    );  }}

You may want to check out the Flux Architecture. I also recommend checking out React-Redux Implementation. Put your api calls in your actions. It is much more cleaner than putting it all in the component.

Actions are sort of helper methods that you can call to change your application state or do api calls.

Use fetch method inside componentDidMount to update state:

componentDidMount(){  fetch('https://randomuser.me/api/')      .then(({ results }) => this.setState({ person: results }));}