/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

0 vote284 views1 answer
React native skeleton
Javascript React
0 vote306 views1 answer
Reactive forms change event in angular
Javascript React
1 vote271 views2 answers
How to use gif in react native
Javascript React
3 votes271 views1 answer
React native run on device command line
Javascript React
4 votes281 views1 answer
How to send axios delete to the backend reactjs
Javascript React
64 votes267 views6 answers
React js router
Javascript React
12 votes282 views3 answers
Get value of input react
Javascript React
73 votes251 views7 answers
React icons
Javascript React
1 vote250 views1 answer
Slider on release call api react material ui
Javascript React
0 vote256 views1 answer
Toggle boolean state react
Javascript React