Forms in React.js

Question

So I am attempting to build a comment form with a textarea input. The user submits their name, email, and leaves a comment which gets saved and sent to another component in an object format. However I am lost on how to build this actual object and target each individual aspect of the form. Here is my attempt:

 mySubmitHandler = event => {
   event.preventDefault();
   const message = {}
 this.props.addMessage(message)
  }

  render() {
  return (
    <footer >
          <form onSubmit={this.mySubmitHandler}>
          <h1>Your name</h1>
          <input type="text" name="name" onChange={this.nameHandler} />
          <h1>Your email</h1>
          <input type="text" name="email" onChange={this.emailHandler} />
          <h1>Your message</h1>
          <textarea onChange={this.contentHandler} />
          <br />
          <input type="submit" />
        </form>
    </footer>
    )
  };
};

Answer 1

Just in case you might want to implement it as a Function Component:

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [state, setState] = useState({
    name: "",
    email: "",
    message: ""
  });

  const mySubmitHandler = event => {
    event.preventDefault();
    console.log(state);
    this.props.addMessage(state);
  };

  const nameHandler = event => {
    setState({
      ...state,
      name: event.target.value,
    });
  };

  const emailHandler = event => {
    setState({
      ...state,
      email: event.target.value,
    });
  };

  const contentHandler = event => {
    setState({
      ...state,
      message: event.target.value,
    });
  };

  return (
    <footer>
      <form onSubmit={mySubmitHandler}>
        <h1>Your name</h1>
        <input type="text" name="name" onChange={nameHandler} />
        <h1>Your email</h1>
        <input type="text" name="email" onChange={emailHandler} />
        <h1>Your message</h1>
        <textarea onChange={contentHandler} />
        <br />
        <input type="submit" />
      </form>
    </footer>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

---

Here's a Sample CodeSandbox for your ref.

Answer 2

Below is the code snippet. Also in your code you have written mutiple change handler for each field, However you can get it down using single change handler like the one done in my code.

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      name: '',
      email: '',
      message: '',
    }
  }

  changeHandle = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    });
  }

  mySubmitHandler = (event) => {
    event.preventDefault();
    //pass the value ahead to new component from here
    console.log(this.state);
  }


  render() {
    return ( <
      div className = "container" >
      <
      form onSubmit = {
        this.mySubmitHandler
      } >
      <
      h1 > Your name < /h1> <
      input type = "text"
      name = "name"
      onChange = {
        this.changeHandle
      }
      /> <
      h1 > Your email < /h1> <
      input type = "text"
      name = "email"
      onChange = {
        this.changeHandle
      }
      /> <
      h1 > Your message < /h1> <
      textarea name = "message"
      onChange = {
        this.changeHandle
      }
      /> <
      br / >
      <
      input type = "submit" / >
      <
      /form> <
      /div>
    );
  }
}

ReactDOM.render( < App / > , document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 3

you can use the attribute ref for the input and textarea fields.

  mySubmitHandler = event => {
    event.preventDefault();

    /* you can access the value as below */
    const inputName = this.refInputName;
    const inputEmail = this.refInputEmail;
    const inputMessage = this.refInputMessage;

    const message = {}
    this.props.addMessage(message)
  }

  render() {
    return (
        <footer>
          <form onSubmit={this.mySubmitHandler}>
            <h1>Your name</h1>
            <input
              type="text"
              name="name"
              ref={(node) => (this.refInputName = node)} // <-- ref
            />
            <h1>Your email</h1>
            <input
              type="text"
              name="email"
              ref={(node) => (this.refInputEmail = node)} // <-- ref
            />
            <h1>Your message</h1>
            <textarea ref={(node) => (this.refInputMessage = node)} /> // <-- ref
            <br />
            <input type="submit" />
          </form>
        </footer>
      )
  };
};