/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

4 votes166 views1 answer
React router external link
Javascript React
0 vote153 views1 answer
Unrecognized font family fontawesome react native ios
Javascript React
0 vote212 views1 answer
Mixed line chart for angular or react
Javascript React
0 vote155 views1 answer
Detect finishing write react input
Javascript React
0 vote152 views1 answer
Assign random colors react chartjs
Javascript React
0 vote175 views1 answer
Url in listitem react
Javascript React
0 vote147 views1 answer
React native call keep
Javascript React
2 votes290 views2 answers
Export aab react native
Javascript React
0 vote144 views1 answer
Keyboard avoidance view not working on react native
Javascript React
3 votes174 views1 answer
React proxy error: could not proxy request from localhost:3000 to http localhost:5000 econnreset
Javascript React