/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 vote141 views1 answer
React-native-dropdown-picker for form react native
Javascript React
0 vote146 views1 answer
Radio button in reactive forms angular material
Javascript React
0 vote141 views1 answer
Websocket with Node and React
Javascript React
8 votes139 views3 answers
Shadown reAct native
Javascript React
0 vote156 views1 answer
Button with icon react native ui
Javascript React
7 votes162 views3 answers
Add backgorund image in react native app
Javascript React
-1 vote148 views1 answer
How to remove react icon from tab
Javascript React
0 vote153 views1 answer
React scroll to top on page refresh - don't restore position
Javascript React
1 vote140 views1 answer
React get input value on button click functional component
Javascript React
0 vote150 views1 answer
React native generate app hash without play console
Javascript React