Write to Paragraph from Text Inputs with React

February 24, 2022

I am working on some code that takes the inputs from two textboxes, one that takes a string value and one that takes a number value, and in real time writes it to a paragraph without a submit button. I am having trouble finding any information on this process without submitting anything. The paragraph should just display . To begin, this is what I have:

import './App.css';

function App() {
  return (

    <div>
      <form>
        <div>String:</div>
      <input type="text" strng = "strng" /><br/><br/>
        <div>Number:</div>
      <input type="text" strng = "number"/><br/><br/>
      <button>Clear</button>
      <p>
        Inputs: 
      </p>
      </form>
    </div>
  )
  }
  export default App;

Would someone be able to help me out with writing the two text boxes to the paragraph in real time? Thanks so much in advance.

>Solution :

You should be able to bind a useState with the onChange event of the input

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

function App() {
  const [text, setText] = useState("");

  return (
    <div>
      <form>
        <div>String:</div>
        <input
          type="text"
          strng="strng"
          onChange={(e) => setText(e.target.value)}
        />
        <br />
        <br />
        <div>Number:</div>
        <input type="text" strng="number" />
        <br />
        <br />
        <button>Clear</button>
        <p>Input: {text}</p>
      </form>
    </div>
  );
}