React Router > React Input with React hooks

Adding a React input with React hooks

Next, we'll use React's useState hook to add state to our input, storing the input on a variable called title.

One thing that we'd like to do is add the ability for the input to automatically focus when clicking new mission. We'll do that next.

Lesson 11/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
        placeholder="Mission Title"
        value={title}
        onChange={onChangeTitle}
      />
    </div>
  );
}

export default NewMission;

Open Sandbox