React Router > Mission Page: Title and Description Components

Mission Page: Title and Description Components

We'll start rendering our Mission page with some simple Title and Description components.

Your mission

Try to add an edit button that changes the title and description to inputs.

Lesson 21/26

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

const MissionTitleRow = styled.div``;

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

const DescriptionContainer = styled.div``;

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

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

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

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

  const { title, description } = mission;

  return (
    <div>
      <MissionTitleRow>
        <MissionTitle> {title} </MissionTitle>
      </MissionTitleRow>
      <DescriptionContainer>
        <DescriptionParagraph>{description}</DescriptionParagraph>
      </DescriptionContainer>
    </div>
  );
}

export default Mission;

Open Sandbox