import { useState, useEffect } from 'react' import { FaEnvelopeOpen, FaUser, FaCalendarTimes, FaMap, FaPhone, FaLock, } from 'react-icons/fa' function App() { const url = 'https://randomuser.me/api/' const defaultImage = 'https://randomuser.me/api/portraits/men/23.jpg' // common conventions const [isLoading, setIsLoading] = useState(true) const [randomPerson, setRandomPerson] = useState(null) const [title, setTitle] = useState('name') const [value, setValue] = useState('random person') const fetchRandomPerson = async () => { setIsLoading(true) const response = await fetch(url) const data = await response.json() // let's have a look at the API const person = data.results[0] // destructure values const { phone, email, login: { password }, name: { first, last }, dob: { age }, picture: { large: image }, location: { street: { number, name }, }, } = person // es6 feature const newPerson = { image, phone, email, password, age, street: `${number} ${name}`, name: `${first} ${last}`, } setRandomPerson(newPerson) setIsLoading(false) setTitle('name') setValue(newPerson.name) } useEffect(() => { fetchRandomPerson() }, []) const handleValue = (e) => { if (e.target.classList.contains('icon')) { const newValue = e.target.dataset.id setTitle(newValue) setValue(randomPerson[newValue]) } } return (

my {title} is

{value}

) } export default App

random-user