Preact — Form Inputs and Dropdowns
Tags: webdev, programming, javascript, beginners
Published: 2021-01-22 21:39:33

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


Preact is a front end web framework that’s similar to React.

It’s smaller and less complex than React.

In this article, we’ll look at how to get started with front end development with Preact.

### Forms

We can handle form inputs in Preact as we do with plain JavaScript and HTML.

We can create uncontrolled components, which are input components where we don’t manage the value of the input.

For example, we can write:

```
import { render } from "preact";

export default function App() {
  return (
    <div>
      <input onInput={(e) => console.log(e.target.value)} />;
    </div>
  );
}
if (typeof window !== "undefined") {
  render(<App />, document.getElementById("root"));
}
```

to add an uncontrolled input component.

We get the input value from the `e.target.value` property but we don’t set the `value` prop with it.

To create a controlled component, we can set the `value` prop of it:

```
import { render } from "preact";
import { useState } from "preact/hooks";

export default function App() {
  const [value, setValue] = useState();
  return (
    <div>
      <p>{value}</p>
      <input value={value} onInput={(e) => setValue(e.target.value)} />;
    </div>
  );
}
if (typeof window !== "undefined") {
  render(<App />, document.getElementById("root"));
}
```

The `onInput` callback calls `setValue` to set the `value` state.

Then we display `value` and pass it into the `value` prop of the input.

### Creating A Simple Form

We can create a simple form easily with Preact.

For instance, we can write:

```
import { Component, render } from "preact";

export default class App extends Component {
  state = { value: "" };

  onSubmit = (e) => {
    alert("Submitted");
    e.preventDefault();
  };

  onInput = (e) => {
    const { value } = e.target;
    this.setState({ value });
  };

  render(_, { value }) {
    return (
      <form onSubmit={this.onSubmit}>
        <input type="text" value={value} onInput={this.onInput} />
        <p>You typed this value: {value}</p>
        <button type="submit">Submit</button>
      </form>
    );
  }
}
if (typeof window !== "undefined") {
  render(<App />, document.getElementById("root"));
}
```

We created a component class that has the `onSubmit` method that’s used as the value of the `onSubmit` prop.

It’ll be called when we click Submit.

The input calls `onInput` when we enter something.

We get the value entered with the `e.target.value` property.

We get the `value` state from the 2nd parameter of the `render` function.

### Select Input

We can add a select input with code similar to the previous example.

For example, we can write:

```
import { Component, render } from "preact";

export default class App extends Component {
  state = { value: "" };

  onChange = (e) => {
    this.setState({ value: e.target.value });
  };

  onSubmit = (e) => {
    alert("Submitted " + this.state.value);
    e.preventDefault();
  };

  render(_, { value }) {
    return (
      <form onSubmit={this.onSubmit}>
        <select value={value} onChange={this.onChange}>
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
        </select>
        <button type="submit">Submit</button>
      </form>
    );
  }
}
if (typeof window !== "undefined") {
  render(<App />, document.getElementById("root"));
}
```

to add a `select` element into our `App` component.

We listen to the `change` event with the `onChange` callback.

And we set the `value` prop to the `value` state.

When we click Submit, the `onSubmit` method runs.

And we see the alert displayed with the value that we selected.

### Conclusion

We can add form inputs and dropdowns easily with Preact.