Intro to React > Representing State with JavaScript Objects

Representing state

Thinking about how to structure data is an important part of building apps and frontend web development as a whole. It really forces you to think about what your application is all about.

For us, we’re rendering a list of tasks, so we’ll use variable names like tasks and React component names like TasksList. Keeping a consistent naming structure is important so you don’t mix up different types of data in your app and the “shape” of data remains memorable.

The actual data will be represented in Plain Old JavaScript Objects (POJOs), or simply Objects. If you’re unfamiliar with JavaScript, Objects are the main data structure used to store key / value pairs.

So, we can represent a Task as an Object, with keys equal to the explorers fields and the values representing the values of those fields. So, a task could look like: { title: 'Swab the deck' }

When we learn about lists next, we will be rendering an array of JavaScript objects.

Lesson 13/22

const task = { title: "Swab the deck" };

export default function App() {
  return (
    <div>
      <h1> Simple Tasks </h1>
      <p> A simple app to create tasks </p>
      <li> {task.title} </li>
    </div>
  );
}

Open Sandbox