S02・V17: Forms (Part 2)

Course: Section

Get Started with Modern React: Step by Step

Episode: Title

S02・V17: Forms (Part 2)

Date Created: July 17th, 2019

Last Updated: 27 days ago

Objectives

We will show you a “textarea” element.
We will show you a “select” element.

Watch Video

Duration: 5m 16s

textarea

First, we will talk about the textarea element. In HTML, a textarea element defines its text by its children. We will show a quick example in public/index.html.

public/index.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>React App</title>
  </head>

  <body>
    <textarea>      Some text in a text area    </textarea>    <div id="root"></div>
  </body>

</html>

You can see the textarea in the browser. Now, let’s remove the textarea, and return to src/index.js. It contains the NameForm component we built in the last video.

src/index.js

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

const NameForm = () => {
  const [value, setValue] = useState("");

  const handleChange = event => {
    setValue(event.target.value.toUpperCase());
  };

  const handleSubmit = event => {
    alert(`A name was submitted: ${value}`);
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
};

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

We will update our NameForm component to be an EssayForm component. We will set the initial state value to be a longer text string. In React, a textarea uses a value attribute instead of children. We will modify the text input to be a textarea.

src/index.js

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

const EssayForm = () => {  const [value, setValue] = useState(
    "Please write an essay about your favorite DOM element."  );

  const handleChange = event => {
    setValue(event.target.value.toUpperCase());
  };

  const handleSubmit = event => {
    alert(`An essay was submitted: ${value}`);    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Essay:        <textarea value={value} onChange={handleChange} />      </label>
      <input type="submit" value="Submit" />
    </form>
  );
};

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

Notice that the state variable value is initialized in useState, so that the text area starts off with some text in it.

select

Next, we will talk about the select element. In HTML, the select element creates a drop-down list.

Within the select opening and closing tags, we can add drop-down list options. We will add a “Grapefruit” option. And a “Lime” option. And a “Coconut” option, which will be selected by default, by using the selected attribute. And finally, a “Mango” option. We will add an hr below the select element, save the file, and view our changes in the browser.

public/index.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>React App</title>
  </head>

  <body>
    <select>      <option value="grapefruit">Grapefruit</option>      <option value="lime">Lime</option>      <option selected value="coconut">Coconut</option>      <option value="mango">Mango</option>    </select>    <hr />    <div id="root"></div>
  </body>

</html>

Click on the select element to see the options. Note that the “Coconut” option is initially selected, because of the selected attribute. We will now remove these changes, and return to src/index.js to implement it in React.

We will update our EssayForm component to be a FlavorForm component. We will set the initial value to be “coconut”. And, we will make some other small updates. Now, we will replace the textarea with the select element.

Instead of using the selected attribute, React uses a value attribute on the root select tag. Overall, this makes it so that input, textarea, and select all work very similarly. They all accept a value attribute that you can use to implement a controlled component. Now, we will add the options.

src/index.js

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

const FlavorForm = () => {  const [value, setValue] = useState("coconut");
  const handleChange = event => {
    setValue(event.target.value);
  };

  const handleSubmit = event => {
    alert(`Your favorite flavor is: ${value}`);    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Flavor:        <select value={value} onChange={handleChange}>          <option value="grapefruit">Grapefruit</option>          <option value="lime">Lime</option>          <option value="coconut">Coconut</option>          <option value="mango">Mango</option>        </select>      </label>
      <input type="submit" value="Submit" />
    </form>
  );
};

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

Test it in the browser. Note that you can pass an array into the value attribute, and you can also specify a multiple attribute, which allows you to select several options in a select tag. You can see the multiple selections in the browser.

Summary

We showed you a textarea element, and we showed you a select element.

Next Up…

In the next video, we will complete our discussion of forms.

Get Started with Modern React: Step by Step