Next js send form data to parent page-CodePudding

I create a simple page called lucky number

pages/lucky.js

import finder from '../../hooks/use-finder'
import NumberForm from '../components/number-form'
export default function LuckyNumber() {
  const { data } = finder(number)
  console.log(data)
  return (
    <>
      <h1>Lucky Number</h1>
      <NumberForm />
    </>
  )
}

export default function NumberForm() {
  return (
    <>
      <form>
        <label>
          Number:
          <input type="text" name="number" />
        </label>
        <input type="submit" value="Submit" />
      </form>
    </>
  )
}

where NumberForm is a form where user can just input a number ex: 12345. Once use submits the form, I want to pass that number to my hook in the page finder(number) so I can check to see if that number is in my lucky list of numbers.

How can I pass the number that user submits to the page?

CodePudding user response：

I think you can use parent state and send the setState to the child to update it i.e.

pages/lucky.js

import React, { useState } from 'react'
import finder from '../../hooks/use-finder'
import NumberForm from '../components/number-form'
export default function LuckyNumber() {
  const [number, setnumber] = useState(0);
  const { data } = finder(number)
  console.log(data)
  return (
    <>
      <h1>Lucky Number</h1>
      <NumberForm onChange={setnumber} />
    </>
  )
}

export default function NumberForm({ onChange }) {
  const [number, setnumber] = useState(0);
  const handleChange = (event)=>{
    setNumber(event?.target?.value)
  }
  const handleSubmit = (event)=>{
    event.preventDefault();
    onChange(number)
  }
  return (
    <>
      <form>
        <label>
          Number:
          <input type="text" name="number" value={number} onChange={ handleChange } />
        </label>
        <input type="submit" value="Submit" onClick={ handleSubmit } />
      </form>
    </>
  )
}