How do I use the data returned from a handleSubmit function in a modal to display what the user has entered?

Question

At the bottom I listed where I want this information from the form listed but I cannot figure out how to use what is logged in my handleSubmit in my HTML. All of the logs in handleSubmit are returning correctly. Is there a better way to display this information than trying the use the event returned by the form?

 class NameForm extends React.Component {

    state = {
        isOpen: false
      };
    
    openModal = () => this.setState({ isOpen: true });
    closeModal = () => this.setState({ isOpen: false });
      
    handleSubmit = (event) => {
      event.preventDefault()
      console.log(event.target[0].value)
      console.log(event.target[1].value)
      console.log(event.target[2].value)
      console.log(event.target[3].value)
    }
    render() {
      return (

        <div className = "form-box">
        <h5 className = "form-step"> Enter you order below </h5>
        <br />
        <form onSubmit={this.handleSubmit}>

        <div className = "field1">

          <label>
            Crust : &nbsp;
            <input
              type="text"
              name="Crust"
              ref={node => (this.inputNode = node)}
            />
          </label>
          <br />
          <label>
            Flavor : &nbsp;
            <input
              type="text"
              name="Flavor"
              ref={node => (this.inputNode = node)}
            />
          </label>
          <br />
          <label>
            Size : &nbsp;
            <input
              type="text"
              name="Size"
              ref={node => (this.inputNode = node)}
            />
          </label>
          <br />
          <label>
            Table # : &nbsp;
            <input
              type="number"
              name="Table"
              ref={node => (this.inputNode = node)}
            />
          </label>
          <br />
          </div>

          <button type="submit" className="submitBtn" onClick={this.openModal}>Submit</button>

        <Modal
      show={this.state.isOpen} 
      onHide={this.closeModal}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Thank you for ordering with us, here is what you got!
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <p id="order">
            I want the information about the users order here
        </p>
      </Modal.Body>

    </Modal>


        </form>
        </div>
      )
    }
  }

Answer 1

You should control your input element as described in the doc here , as this you will always have the value of an input available in your state and decide to display it were ever you want.

Here is what it could be like in your case --> https://codesandbox.io/s/zealous-dust-bdflk?file=/src/App.js