SampleList.jsx

import { useEffect, useState } from 'react'

const SampleList = ({ values }) => (
  <ul>
    {
      values.map(({ id, item }) =>
        <li key={id}>{item}</li>
      )
    }
  </ul>
)
const fetchData = async (uri) => {
  const data = await window.fetch(uri)
    .then(res => res.json())
    .then(json => json.values)
  return data
}

const App = props => {
  const [values, setValues] = useState([])
  useEffect(() => (
    fetchData('http://localhost:3000/values.json')
      .then(values => setValues(values))
  ), [])

  return (
    <>
      <SampleList values={values} />
    </>
  )
}

export default App