#100DAYSOFCODE Day75

#100DAYSOFCODE Day75

Haorong Li's photo
Haorong Li

Try to do the React Coding Interview

Link

1. make a counter

2. fetch data

function App() {
  const [fetchData, setFetchData] = React.useState(null)

  React.useEffect(() => {
    fetch("https://randomuser.me/api")
      .then((response) => response.json())
      .then((result) => setFetchData(result.results))
  }, [])

  return (
    <div className='App'>
      <p>fetch data: {JSON.stringify(fetchData)}</p>
    </div>
  )
}

show every name and picture in array form data

I didn't use JSX, so here is my way

function App() {
  const [fetchData, setFetchData] = React.useState(null)

  React.useEffect(() => {
    fetch("https://randomuser.me/api")
      .then((response) => response.json())
      .then((result) => setFetchData(result.results))
  }, [])
  if (!fetchData) return <p>Loading</p>
  console.log(fetchData)
  return (
    <div className='App'>
      <p>fetch data: {JSON.stringify(fetchData, null, 3)}</p>
      <DataList data={fetchData} />
    </div>
  )
}
function DataList({ data }) {
  return data.map((item) => {
    return <Card data={item} id={item.id} />
  })
}
function Card({ data }) {
  return (
    <div>
      <p>Name: {data.name.first + " " + data.name.last}</p>
      <img src={data.picture.medium} alt='user' />
    </div>
  )
}

make a button to fetch more data

function App() {
  const [fetchData, setFetchData] = React.useState([])
  const [fetchPage, setFetchPage] = React.useState(1)
  const fetchMoreHandler = () => {
    setFetchPage((page) => ++page)
  }
  React.useEffect(() => {
    // ?page=2
    fetch(`https://randomuser.me/api/?page=${fetchPage}`)
      .then((response) => response.json())
      .then((result) => setFetchData((data) => [...data, ...result.results]))
  }, [fetchPage])
  if (!fetchData) return <p>Loading</p>
  console.log(fetchData)
  return (
    <div className='App'>
      <p>fetch data: {JSON.stringify(fetchData, null, 3)}</p>
      <DataList data={fetchData} />

      <button onClick={fetchMoreHandler}>Fetch More</button>
    </div>
  )
}
function DataList({ data }) {
  return data.map((item) => {
    return <Card data={item} id={item.id} />
  })
}
function Card({ data }) {
  return (
    <div>
      <p>Name: {data.name.first + " " + data.name.last}</p>
      <img src={data.picture.medium} alt='user' />
    </div>
  )
}
export default App
100DaysOfCode