title: nextjs passing data to component
body: <p>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 <code>handleSubmit()</code> function it is out of scope to the canvas prop. I appreciate any help. Thanks.</p>
  <p>I have a datepicker that passes the selected value as a parameter to the API. The data is fetched just fine. I can <code>console.log</code> it but I can't seem to find a way to send the data to my <code>canvas</code> component.</p>
  <pre class="lang-js prettyprint-override"><code>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) =&gt; {
      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 (
      &lt;section&gt;
        &lt;h2&gt;Layout Example (Ground)&lt;/h2&gt;
        &lt;form onSubmit={handleSubmit}&gt;
          &lt;DatePicker
            selected={startDate}
            onChange={(date) =&gt; setStartDate(date)}
          /&gt;
          &lt;button type='submit'&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
  
        &lt;section&gt;
          &lt;&gt;
            &lt;Canvas data={track} /&gt; // doesn't seem to reach here.
          &lt;/&gt;
        &lt;/section&gt;
      &lt;/section&gt;
    )
  }
  
  Ground.getLayout = function getLayout(page) {
    return (
      &lt;Layout&gt;
        &lt;Sidebar /&gt;
        {page}
      &lt;/Layout&gt;
    )
  }
  
  </code></pre>