how to render input values on button click react-CodePudding

I have two fields and a button. I want to render input values on the click of a button. Can you guys please tell me how to do it?

function Home() {
  const [name, setName] = useState('')
  const [age, setAge] = useState(0)

  const submitForm = () => {
    console.log(name, age)
  }

  return (
    <div>
      <div>
        <label htmlFor="name">Name:</label>
        <input type="text" value={name} onChange={e => setName(e.target.value)} />
      </div>
      <div>
        <label htmlFor="age">age:</label>
        <input type="number" value={age} onChange={e => setAge(e.target.value)} />
      </div>
      <button onClick={submitForm}>Submit</button>
      <h1>render "name" gere</h1>
      <h2>render "age" gere</h>
    </div>
  )
}

export default Home

CodePudding user response：

You can add a state to track the display state, as

  const [visible, setVisible] = useState(false)

Alter it in form submit as:

const submitForm = () => {
    setVisible(true)
  }

And render it as:

{visible && <><h1>render {name} gere</h1>
             <h2>render {age} gere</h2> </>}

CodePudding user response：

I fix it like this.

function Home() {
  const [name, setName] = useState('')
  const [age, setAge] = useState(0)
  const [data, setData] = useState({})

  const submitForm = () => {
    setData({name, age})
  }

  return (
    <div>
      <div>
        <label htmlFor="name">Name:</label>
        <input type="text" value={name} onChange={e => setName(e.target.value)} />
      </div>
      <div>
        <label htmlFor="age">age:</label>
        <input type="number" value={age} onChange={e => setAge(e.target.value)} />
      </div>
      <button onClick={submitForm}>Submit</button>
      <h1>{data.name}</h1>
      <h2>{data.age}</h2>
    </div>
  )
}

export default Home

CodePudding user response：

Try this and see if it helps.

 function Home() {
  const {register, handleSubmit} = useForm()

  const onSubmit = (data) => {
    console.log(data)
  }
  
 return (
 <form onSubmit = {handleSubmit(onSubmit)}>
    <div>
      <div>
        <label htmlFor="name">Name:</label>
        <input type="text" value={name} onChange={e => setName(e.target.value)} />
      </div>
      <div>
        <label htmlFor="age">age:</label>
        <input type="number" value={age} onChange={e => setAge(e.target.value)} />
      </div>
      <button onSubmit={submitForm}>Submit</button>
      <h1>render "name" gere</h1>
      <h2>render "age" gere</h>
    </div>
    <form/>
  );
  }