React Router > Mission Edit State

Mission Page: Button sets Edit State

Now let's add some interaction to the buttons. Go to Missions -> click on a mission and click on the edit button. We're now adding state to the Mission component.

In Mission.js, we're using state via useState to initialize a state variable indicating whether we are editing or not. It's true or false, that's all it does. If false (the default state passed into useState), we're not editing, so show the Edit / Delete buttons.

When clicking on Edit, we setEditing(true) in the click handler on the edit button. Then, since editing is true, we render different content based on the conditional return editing ? (editing content) : (default content).

Lastly, when you click Cancel, we set the editing state back to false. This example just sets us up to edit the title and description.

Lesson 24/26

import { useState, useMemo } from "react";
import styled from "styled-components";
import { useParams } from "react-router-dom";
import { missions } from "./Missions";
import Button from "../Components/Button";

const MissionTitleRow = styled.div`
  display: grid;
  grid-template-columns: 1fr 200px;
`;

const MissionTitle = styled.h2`
  font-size: 22px; 
`;

const DescriptionContainer = styled.div``;

const DescriptionParagraph = styled.p`
  font-size: 16px;
  font-weight: normal;
  line-height: 21px;
`;

const MissionActions = styled.div`
  display: grid;
  grid-auto-flow: column;
  justify-self: right;
  gap: 4px;
`;

function findMissionById(id) {
  return () => missions.find((mission) => mission.id == id);
}

function Mission() {
  const { id } = useParams();
  const mission = useMemo(findMissionById(id), []);
  const [editing, setEditing] = useState(false);

  if (!mission) {
    return <div> No mission found </div>;
  }

  const { title, description } = mission;

  return editing ? (
    <div>
      <MissionTitleRow>
        <MissionActions>
          <Button variant="outline" onClick={() => setEditing(false)}>
            Cancel
          </Button>
        </MissionActions>
      </MissionTitleRow>
    </div>
  ) : (
    <div>
      <MissionTitleRow>
        <MissionTitle> {title} </MissionTitle>
        <MissionActions>
          <Button variant="outline" onClick={() => setEditing(true)}>
            Edit
          </Button>
          <Button variant="outline">Delete</Button>
        </MissionActions>
      </MissionTitleRow>
      <DescriptionContainer>
        <DescriptionParagraph>{description}</DescriptionParagraph>
      </DescriptionContainer>
    </div>
  );
}

export default Mission;

Open Sandbox