CODEWITHSUNDEEP
reactjsreact-hooks
Saterz
Saterz

Reputation: 53

Displaying content of input to page with react hooks

I want to take in some text from a user, and when they hit the submit button, display the text they entered onto the page using 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;

Upvotes: 0

Views: 728

Answers (1)

Haresh Samnani
Haresh Samnani

Reputation: 812

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;

Upvotes: 3

Related Questions