/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

2 votes99 views1 answer
How to get current URL with Javascript or React
Javascript React
0 vote238 views1 answer
Setstate to false after 10 sec react native
Javascript React
63 votes105 views3 answers
Concat two arrays in react
Javascript React
0 vote98 views5 answers
React native cache clear
Javascript React
1 vote103 views1 answer
ERESOLVE unable to resolve dependency tree Found: [email protected] Could not resolve dependency: react native paper
Javascript React
0 vote94 views1 answer
How to add react.memo in export list
Javascript React
0 vote114 views1 answer
How to insalk react router with npm
Javascript React
1 vote88 views1 answer
Ctx in react
Javascript React
-1 vote67 views1 answer
How to retrieve filename from a blob response in react js
Javascript React
8 votes108 views4 answers
React multiple classnames
Javascript React