/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 vote369 views1 answer
Add pdf in react app
Javascript React
0 vote349 views1 answer
Load all icon from a folder in react
Javascript React
0 vote557 views1 answer
React-data-table-component cell action stack overflow
Javascript React
0 vote376 views1 answer
Use font awesome in react native
Javascript React
0 vote374 views1 answer
Making a react js website project ready for hosting
Javascript React
13 votes371 views5 answers
React native setup
Javascript React
1 vote328 views1 answer
How to use array of object in react
Javascript React
1 vote349 views3 answers
React redux how to change object value in reducer
Javascript React
6 votes409 views2 answers
#react native shadow
Javascript React
6 votes383 views2 answers
Export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom'
Javascript React