/Javascript/React/How to call api on load using hooks in react

How to call api on load using hooks in react

function User() {
  const [firstName, setFirstName] = React.useState(null);
  const [lastName, setLastName] = React.useState(null);
  
  React.useEffect(() => {
    fetch('https://randomuser.me/api/')
      .then(results => results.json())
      .then(data => {
        const {name} = data.results[0];
        setFirstName(name.first);
        setLastName(name.last);
      });
  }, []); // <-- Have to pass in [] here!

  return (
    <div>
      Name: {!firstName || !lastName ? 'Loading...' : `${firstName} ${lastName}`}
    </div>
  );
}

ReactDOM.render(<User />, document.querySelector('#app'));

Source: stackoverflow.com

Similar codes

1 vote143 views1 answer
When i go srource in react app in chrome i see my files
Javascript React
1 vote159 views1 answer
React native "modalize" above bottom navigation
Javascript React
5 votes143 views2 answers
Update react version
Javascript React
18 votes170 views6 answers
Uselocation react
Javascript React
140 votes559 views5 answers
React js installation
Javascript React
0 vote178 views1 answer
Change module name react native android studio
Javascript React
0 vote165 views1 answer
Module missing for arearange highcharts react
Javascript React
0 vote150 views2 answers
Counter with react hooks
Javascript React
-1 vote215 views1 answer
Spotify player react
Javascript React
0 vote187 views1 answer
How to only register one click on nested component and not parent component in react js
Javascript React