React Router > React Input autoFocus

React Input autoFocus

Here we've added the autoFocus attribute on the Input. Now, when we click Missions -> New Mission, it will automatically focus the input so the user can start typing the name of their mission. Awesome sauce.

Lesson 12/26

import { useState } from "react";
import Input from "/Components/Input";

function NewMission() {
  const [title, setTitle] = useState("");

  const onChangeTitle = ({ target: { value } }) => setTitle(value);

  return (
    <div>
      <Input
        autoFocus
        placeholder="Mission Title"
        value={title}
        onChange={onChangeTitle}
      />
    </div>
  );
}

export default NewMission;

Open Sandbox