Write to Paragraph from Text Inputs with React-CodePudding

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.

CodePudding user response：

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>
  );
}