Preact — Checkboxes, Radio Buttons, and Refs
Tags: webdev, programming, javascript, beginners
Published: 2021-01-22 21:39:50

**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.

### Checkboxes and Radio Buttons

We can add checkboxes or radio buttons and get their selected values.

For example, we can write:

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

export default class App extends Component {
  toggle = (e) => {
    let checked = !this.state.checked;
    this.setState({ checked });
  };

  render(_, { checked }) {
    return (
      <label>
        <input type="checkbox" checked={checked} onClick={this.toggle} />
      </label>
    );
  }
}
if (typeof window !== "undefined") {
  render(<App />, document.getElementById("root"));
}
```

We create the `checked` state.

Then we pass that into the `checked` prop.

The `onClick` prop is set to the `toggle` method.

And we call `setState` to set the `checked` state.

We can add radio buttons by writing:

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

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      fruit: "apple"
    };
  }

onChangeValue = (event) => {
    this.setState({ fruit: event.target.value });
  };

render(_, { fruit }) {
    return (
      <div onChange={this.onChangeValue}>
        <input
          checked={fruit === "apple"}
          type="radio"
          value="apple"
          name="fruit"
        />{" "}
        apple
        <input
          checked={fruit === "orange"}
          type="radio"
          value="orange"
          name="fruit"
        />{" "}
        orange
        <input
          checked={fruit === "grape"}
          type="radio"
          value="grape"
          name="fruit"
        />{" "}
        grape
      </div>
    );
  }
}
if (typeof window !== "undefined") {
  render(<App />, document.getElementById("root"));
}
```

We add the radio buttons.

Then we watch for changes in radio button selection with the `onChange` callback.

In the `onChangeValue` method, we call `setState` to set the `fruit` state.

In the `input` s, we set the `checked` prop to set the checked state of the radio button.

We get the `fruit` state from the `render` method and check against that to set the checked state.

### `createRef`

We call the `createRef` function to return a plain object with the `current` property.

Whenever the `render` method is called, Preact will assign the DOM node or component to `current` .

For example, we can write:

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

export default class App extends Component {
  ref = createRef();

  componentDidMount() {
    console.log(this.ref.current);
  }

  render() {
    return <div ref={this.ref}>foo</div>;
  }
}
if (typeof window !== "undefined") {
  render(<App />, document.getElementById("root"));
}
```

to assign our `ref` to the div.

So when we log `this.ref.current` , we’ll see the div logged.

### Callback Refs

We can also get a reference to an element by passing in a callback function.

For example, we can write:

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

export default class App extends Component {
  ref = null;
  setRef = (dom) => (this.ref = dom);

  componentDidMount() {
    console.log(this.ref);
  }

  render() {
    return <div ref={this.setRef}>foo</div>;
  }
}
if (typeof window !== "undefined") {
  render(<App />, document.getElementById("root"));
}
```

We have the `setRef` function with the `dom` parameter, which has the DOM node that we passed this function as the value of `ref` to.

Since we passed it in as the value of the `ref` prop in the div, the div is `dom` ‘s value.

We assigned it to `this.ref` so that we can access it.

And in the `componentDidMount` hook, we log the value of `this.ref` and we see that its value is the div.

### Conclusion

We can add checkboxes and radio buttons easily with Preact.

And we can get DOM elements with refs.