Displaying content of input to page with react hooks

March 8, 2022

I want to take in some text from a user, and when they hit the submit button, display the text they entered on to the page suing react hooks.

This is what I have so far, I’m capturing the input however I am not sure how to display it to the page…

    import logo from './logo.svg';
import './App.css';
import React from 'react';

function App() {

  const [name, setName] = React.useState('')

  const handleInput = () => {
    alert(name);
  }

  return (
    <div className="App">
      <header className="App-header">
        <input placeholder="player name" onChange={e => setName(e.target.value)} />
        <button onClick={() => handleInput()}>Input</button>
      </header>
    </div>
  );
}

export default App;

Thanks:)

>Solution :

Here you go:

import React from "react"

function App() {

  const [name, setName] = React.useState('')

  const [showName, setShowName] = React.useState(false)

  const handleInput = () => {
    setShowName(true)
  }

  return (
    <div className="App">
      <header className="App-header">
        <input placeholder="player name" onChange={e => setName(e.target.value)} />
        <button onClick={() => handleInput()}>Input</button>
      </header>
      {
        showName && <span>{name}</span>
      }
    </div>
  );
}

export default App;