Lesson 3: Setup the CreateTodoList component

In this lesson, we'll create a first React component that will be used to perform a create operation to generate a todo list. The only value that will be passed to create a todo list is its name.

First, we'll create the React component file under web-src/src/components/ and name it CreateTodoList.js. If you're not familiar with React components and props, please first read the React documentation on JSX and Components and props.

Import React Spectrum components

If you choose the React Spectrum template, the App Builder app will have @adobe/react-spectrum dependencies installed by default.

This component will make use of several React Spectrum components:

Flex for the layout.
Form to submit the todo list.
TextField as the main input field.
Button to trigger form submission.

We can import them all with a single statement.

import { Flex, Form, TextField, Button } from '@adobe/react-spectrum';
Copied to your clipboard
import { Flex, Form, TextField, Button } from '@adobe/react-spectrum';

Component property

The component will accept a single property, a callback function onCreate invoked when a todo list is created.

function CreateTodoList({ onCreate }) {
  // ...
}
Copied to your clipboard
function CreateTodoList({ onCreate }) {
  // ...
}

Creating a todo list

We'll declare a state variable and bind it to the Textfield in order to retrieve the input value. If you're not familiar with React hooks, please read the hooks introduction.

First, we have to import the State Hook useState from react before being able to define a state variable.

import { useState } from 'react';
Copied to your clipboard
import { useState } from 'react';

Calling useState will return an array with 2 values: the state value and a function to set the state value.

const [todoListName, setTodoListName] = useState('');
Copied to your clipboard
const [todoListName, setTodoListName] = useState('');

We're using a destructuring assignment to retrieve and declare both values. By default on initialization, the value of todoListName is set to empty string '';

Next we'll bind the todoListName state to the TextField value and update it with setTodoListName() on every input change. Learn more about React event handling here.

<TextField
    value={todoListName}
    onChange={(value) => {
      setTodoListName(value);
    }}
    label="Todo list"
    placeholder="Name"
/>
<Button type="submit" variant="cta">
  Create
</Button>
Copied to your clipboard
<TextField
    value={todoListName}
    onChange={(value) => {
      setTodoListName(value);
    }}
    label="Todo list"
    placeholder="Name"
/>
<Button type="submit" variant="cta">
  Create
</Button>

We'll wrap the TextField and submit Button with a Form component so that we can invoke the callback function on form submission. We'll prevent the default form submission behavior with event.preventDefault() and pass the todo list name as parameter to the callback function.

<Form
  onSubmit={async (event) => {
    event.preventDefault();
    
    onCreate && (await onCreate(todoListName));
}}>
Copied to your clipboard
<Form
  onSubmit={async (event) => {
    event.preventDefault();
    
    onCreate && (await onCreate(todoListName));
}}>

The full component

Finally, we'll add the Flex layout to align the TextField with the Button to obtain a fully functional React component. Read more about React rendering here.

See the full component code here.

CreateTodoList