Mission Data Structure

React Router > Mission Data Structure

Now that we've created the shell of our application, it's time to model our data. It's essential to first design the data structure of the "things" your app will be displaying, creating, updating and deleting. Keeping this model as simple and concise as it can be is very important- you don't want extra fields that only correspond to some of the data, or fields that need to be recomputed. You don't want to repeat yourself either, and have fields that duplicate data.

For our app, we will start with a simple array of missions. This list of data will contain plain JavaScript objects with the same keys: id, title and description. The id is the unique identifier, ultimately created by the server, that will help us pick a specific object out of the list. For example, if a user navigates to /missions/1, we can create a special fetch to GET only the data that corresponds to that id. Similarly, if we already have that data fetched, we can find the specific object in our local data store.

The title and description are simple strings that tell us information about the mission.

Rendering our list of data

To render a list of our data, we'll use the map array function to loop over each mission object and render a simple div. We destructure off of the mission object to pull the relevant key value data we need. We need to set a unique key for each mission, that we set to a concatenated string: mission-1, mission-2, etc.

This is not our final rendering of the missions, we will improve this as we continue with this section to render the missions as a table.

Lesson 17/26

import styled from "styled-components";
import LinkButton from "../Components/LinkButton";

const MissionsHeaderRow = styled.div`
  display: flex;

  > :first-child {
    flex-grow: 1;
  }
`;

const MissionsHeader = styled.h1``;

const missions = [
  { id: 1, title: "Learn React", description: "Start with the basics of UI" },
  {
    id: 2,
    title: "Learn Redux",
    description: "Manage client-side application state",
  },
  { id: 3, title: "Learn Rails", description: "Build a scalable REST API" },
];

function Missions() {
  return (
    <>
      <MissionsHeaderRow>
        <MissionsHeader> Missions </MissionsHeader>
        <LinkButton to="/missions/new"> New Mission </LinkButton>
      </MissionsHeaderRow>
      {missions.map(({ id, title, description }) => (
        <div key={`mission-${id}`}>
          {" "}
          {title}: {description}{" "}
        </div>
      ))}
    </>
  );
}

export default Missions;

Open Sandbox