Lesson 1.3

This lesson will teach you the following:

• React Props
• React State
• Handler Function
• Callback handlers

Instructions

Overview

In HTML, attributes define the properties of the element. Because JSX is an XML markup language, JSX elements can have attributes too. Attributes that you write in JSX elements are passed to the component represented by the element as properties, or props for short.

So props are the arguments that you pass into a component from a parent component. With JSX, the attributes that you write become properties inside the props object of the resulting component instance.

• Prop’s value can be any type of JavaScript data or expression
• Props are read-only

Once data has been passed to a component using props that data is treated as immutable. This means that although a component receives props, once those props are values inside the component, the component cannot change them.

Each time a JavaScript function is run, the variables inside it are initialized. Because functional components are merely JavaScript functions, it’s not possible for them to have persistent local variables.

If all you want to do is render a static component that never changes, all you need is props. However, the real value of React is in how it enables interactive web applications and manages updates to components in response to user input.

The reason for this is that React only re-renders components in response to state changes. Props are the mechanism for updating components according to state changes.

React uses hooks for functional components giving them additional functionality. The hook that allows you to persist data is useState.

import {useState} from ‘react’

The useState hook accepts an initial value and returns an array containing a stateful variable and a function (setter function) for updating the stateful variable. The setter function needs to be used to update state because it will trigger a re-render the component tree the state variable is defined within.

// [state variable, setter function] = initial value
const [todos, setTodos] = useState({name: “do homework”}];

Now put this into action...

Move List Item into New "Todo List Item" Component

• Inside /src directory, create a new file called TodoListItem.js
• Open /src/TodoListItem.js
• Create a new functional React component (see below)
  • Import React from "react" npm package
  • Declare a function named TodoListItem
  • Export TodoListItem function as default module
• Add a multi-line return statement to your TodoListItem function (this is where we will insert JSX)
  • hint: use parenthesis for multi-line return
• Move list item JSX from TodoList.js to TodoListItem.js (see below)
  • Open /src/TodoList.js
  • Cut (copy and remove) the list item element (<li>)
  • Open /src/TodoListItem.js
  • Inside the multi-line return, paste the list item element (<li>)
  • Remove the key attribute
• Refactor TodoList.js to use new TodoListItem component (see below)
  • Open /src/TodoList.js
  • Below React, import TodoListItem
  • Inside the map() method, use the TodoListItem component
    • Pass key as a prop equal to the id of the todo object
    • Pass todo as a prop
• Update TodoListItem component to use props (see below)
  • Open /src/TodoListItem.js
  • Add props as a parameter in the TodoListItem function
  • Update the todo object reference to come from props
• Run your application and view in browser
  • Verify that your Todo List still appears correctly

Handle "Add Todo Form" Submit

• Open /src/AddTodoForm.js
• Add a name attribute to the text input with value title
• Inside the AddTodoForm functional component, above the return statement, create a new function called handleAddTodo that takes event as a parameter
  • First, inside this function, prevent the default behavior of the form submit
    • hint: preventDefault method
  • Next, retrieve the value of the title element from the event target and store it in a variable named todoTitle
  • Log the value of todoTitle in the console
  • Finally, reset the form so the text input value is cleared
• Add onSubmit prop to form element and pass the handleAddTodo function by reference
• View your application in browser
• Enter a value in the text input and submit the form
  • Verify that the value you entered is visible in the console
  • Verify that form is cleared properly

Store "New Todo" in React State

• Open /src/App.js
• Inside the App functional component, above the return statement, create a new state variable named newTodo with update function named setNewTodo
  • hint: useState hook
• Below the <AddTodoForm /> component, add a paragraph element that displays the value of newTodo variable
• Pass setNewTodo as a callback handler prop named onAddTodo to the AddTodoForm component
• Open /src/AddTodoForm.js
• Add props as a parameter in the AddTodoForm function
• Inside the handleAddTodo function, invoke the onAddTodo callback prop and pass todoTitle as an argument
• View your application in browser
• Enter a value in the text input and submit the form
  • Verify that the value you entered is visible beneath the form