how to render input values on button click react

Question

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

NeERAJ TK · Accepted Answer · 2022-03-30 13:26:09Z

2

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> </>}

answered Mar 30, 2022 at 13:26

NeERAJ TK

2,7151 gold badge18 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rocco · Accepted Answer · 2022-03-30 13:38:38Z

0

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

edited Mar 30, 2022 at 13:38

answered Mar 30, 2022 at 13:29

rocco

1531 silver badge10 bronze badges

1 Comment

NeERAJ TK Over a year ago

Data will be visible before submission. And you need not return data in submitForm

James Mwaura · Accepted Answer · 2022-03-30 13:47:29Z

0

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/>
  );
  }

answered Mar 30, 2022 at 13:47

James Mwaura

1016 bronze badges

Collectives™ on Stack Overflow

how to render input values on button click react

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related