App.jsx

import React, { useState, useEffect } from "react";
import UserOutput from './UserOutput'
import UserInput from "./UserInput";

// challenge 1
function App() {
  const [user, setUser] = useState(null)

  useEffect(() => {
    const getUserData = async () => {
      const response = await fetch("https://randomuser.me/api/")
      const randomUser = await response.json()
      setUser(randomUser.results[0])
    }
    getUserData()
  }, [])

  return user && (
      <div>
        <h1>Cell: {user.cell}</h1>
        <h3>Email: {user.email}</h3>
        <img src={user.picture.large} alt="random user"/>
      </div>
  )
}

// challenge 2
function App() {
  const [username, setUsername] = useState("harrison")

  return (
    <>
      <UserOutput username={username} />
      <UserOutput />
      <UserOutput />
      <UserInput setUsername={setUsername} />
    </>
  );
}

export default App;

UserInput.jsx

import React from "react";

const UserInput = (props) => {
  return (
    <input
      type="text"
      name="name"
      id="name"
      onChange={(event) => props.setUsername(event.target.value)}
    />
  );
};

export default UserInput;

UserOutput.jsx

import React from "react";

const UserOutput = (props) => {
  return (
    <div>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>{props.username ? props.username : "Lorem ipsum dolor sit amet."}</p>
      <hr/>
    </div>
  )
};

export default UserOutput;