react question about input forms How do I manipulate this code so that once a user submits something

Gustavo Payano 0
Viewed 23

import './App.css';
import React , { useState} from "react"

function App() {
  const [input , setInput] = useState('')
  const [newSubmitInput , setSubmitInput ] = useState('')

  function clickHandle (e){
    e.preventDefault();
    
    
  }
  return (
    <div className="container">

    {input ? <h1> Hello {input}</h1> : <h1>Type an input</h1>}
    <form onSubmit={clickHandle}>
<input id=" nameInput"type="text" placeholder='Whats Your Name?'value={input} onChange={e => setInput(e.target.value)}/>
<button onClick={clickHandle} type="submit">Submit</button>
</form>
    </div>
  );
}

export default App;

How do I manipulate this code so that once a user submits something that's when an h1 will conditionally render and display hello and then what the user inputted?

reactjs
1 Answers

If I understand you correctly, you only want to trigger the h1 modification only on submit, and not while using the input. Can be done as followed:

import React, { useState } from 'react'

function App () {
  const [input, setInput] = useState('')
  const [newSubmitInput, setSubmitInput] = useState('')

  function clickHandle (e) {
    e.preventDefault()
    setSubmitInput(input)
  }
  return (
    <div className='container'>
      {input ? <h1> Hello {newSubmitInput}</h1> : <h1>Type an input</h1>}
      <form onSubmit={clickHandle}>
        <input
          id=' nameInput'
          type='text'
          placeholder='Whats Your Name?'
          value={input}
          onChange={e => setInput(e.target.value)}
        />
        <button onClick={clickHandle} type='submit'>
          Submit
        </button>
      </form>
    </div>
  )
}

export default App
Simon Hagmann0
Related