nextjs passing data to component

Question

I can't figure out for the life of me to pass the data I fetched from my API to the canvas component. It seems to me where the data is available in the handleSubmit() function it is out of scope to the canvas prop. I appreciate any help. Thanks.

I have a datepicker that passes the selected value as a parameter to the API. The data is fetched just fine. I can console.log it but I can't seem to find a way to send the data to my canvas component.

import React, { useState, useEffect } from 'react'
import Layout from '../components/layout'
import Sidebar from '../components/sidebar'
import DatePicker from 'react-datepicker'
import Canvas from '../components/canvas'

import 'react-datepicker/dist/react-datepicker.css'

export default function Ground({ track }) {
  function epoch(date) {
    date = Date.parse(date)
    date = date / 1000
    return date
  }

  const [startDate, setStartDate] = useState(new Date())
  const rightThisSecond = Math.round(Date.now() / 1000)
  const beginDate = Math.round(Date.now(startDate) / 1000)

  const handleSubmit = async (e) => {
    e.preventDefault()
    // console.log(epoch(startDate))

    const beginDate = epoch(startDate)
    // console.log(beginDate)
    // ... submit to API or something
    const res = await fetch(
      `/api/tracks/timeseries/${beginDate}/${rightThisSecond}`
    )
    const track = await res.json()
    // console.log(track)
  }
  return (
    <section>
      <h2>Layout Example (Ground)</h2>
      <form onSubmit={handleSubmit}>
        <DatePicker
          selected={startDate}
          onChange={(date) => setStartDate(date)}
        />
        <button type='submit'>Submit</button>
      </form>

      <section>
        <>
          <Canvas data={track} /> // doesn't seem to reach here.
        </>
      </section>
    </section>
  )
}

Ground.getLayout = function getLayout(page) {
  return (
    <Layout>
      <Sidebar />
      {page}
    </Layout>
  )
}

Answer 1

Your handleSubmit is async so const track = await res.json() will execute just fine, after the component has already rendered and it'll never be used.

You need to update the state after your data returns so that the component can rerender with the fetched data, using something like setTrack(track). Then in your component you can pass the data from the state.

Example:

const [track, setTrack] = useState()

...

setTrack(await res.json())

...

<Canvas data={track} />