Preact — Form Inputs and Dropdowns

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.