/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 vote152 views1 answer
Attempted import error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap').
Javascript React
9 votes141 views3 answers
Shadowoffset react native constructor
Javascript React
0 vote128 views1 answer
Write button hover in react
Javascript React
0 vote142 views1 answer
Onclick start and stop the count react
Javascript React
0 vote135 views3 answers
Difference between React.functioncomponent and React.component
Javascript React
1 vote169 views2 answers
Get syntethicbaseevent and parameter in react
Javascript React
0 vote132 views1 answer
React developer cvs
Javascript React
3 votes134 views2 answers
React get data attribute from element
Javascript React
4 votes145 views1 answer
External site links in react Link
Javascript React
1 vote90 views1 answer
Mkdir: cannot create directory â€˜src/components/dashboardâ€™: no such file or directory in react
Javascript React