Para ter o efeito esperado e digitar na caixa de texto e mostrar o resultado tem que usar o useState
para guardar o estado atual e no evento onChange
do <input />
alterar esse estado, exemplo minimo:
function App() {
const [name, setName] = React.useState('');
return (
<div>
<h1>{name}</h1>
<div>
<input
type="text"
value={name}
onChange={e => setName(e.target.value)}
/>
</div>
</div>
)
}
ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Se quiser que isso aparece a partir do evento onSubmit
de um formulário, precisa envolver dentro de um tag
form
os elementos e fazer uma referencia a tag <h1>
com useRef()
e a partir do submeter do formulário resgate o valor da variável de estado e enviar por referencia para o h1
, exemplo:
function App() {
const [name, setName] = React.useState('');
const refH1 = React.useRef();
const handleSubmit = (e) => {
e.preventDefault();
refH1.current.innerHTML = name;
}
return (
<div>
<h1 ref={refH1}></h1>
<div>
<form onSubmit={handleSubmit}>
<input
type="text"
value={name}
onChange={e => setName(e.target.value)}
/>
<button>Enviar</button>
</form>
</div>
</div>
)
}
ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>