Forem: Joseph Lynn

JavaScript - Prototypal Inheritance

Joseph Lynn — Fri, 23 Jul 2021 17:55:39 +0000

JavaScript is a prototype-based language that has prototypal inheritance. Which is not the same as classical inheritance. Prototypal inheritance is more flexible than classical inheritance. With classical inheritance, you inherit all of the parent's methods. With prototypal inheritance, you can inherit specific functions by adding them to the .prototype.

I'll give some code examples below and here is the code sandbox to view the code as well.

Reference: class vs prototypal
Reference: inheritance and the prototype chain
Reference: Object prototypes
Reference: Constructor Pattern

Classes are functions

Creating a class in JavaScript is syntax sugar (makes your code more readable). When creating classes, you are creating a function that serves as a constructor (a function called with the new operator). Here is what that looks like:

Reference: new operator

// constructor function
function Person(firstName, lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}

// creating an instance method on Person
// this method can be called on any new instance of Person
Person.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}`;
};

// creating an instance method on Person
// this method can be called on any new instance of Person
Person.prototype.getAge = function () {
  return this.age;
};

console.log(typeof Person); // => function

// creating an instance of Person
const user = new Person("Joe", "Lynn", 27);
console.log(user.getFullName()); // => 'Joe Lynn'
console.log(user.getAge()); // => 27

Class implementation of above example

// create User class 
class User {
  constructor(firstName, lastName, age) {
    this.firstName = firstName
    this.lastName = lastName
    this.age = age
  }

  // creating a method getFullName()
  getFullName() {
    return `${this.firstName} ${this.lastName}`
  }

  // creating a method getAge()
  getAge() {
    return this.age
  }
}

console.log(typeof User) // => function 

const user2 = new User('Sierra', 'Lynn', 26)
console.log(user2.getFullName()) // => 'Sierra Lynn'
console.log(user2.getAge()) // => 26

What is a prototype?

All JavaScript objects inherit properties and methods from a prototype. A prototype is an object that lets you store properties and methods that we want to be inherited further down the prototype chain.

// Object prototype
{
  constructor: ƒ Object()
  hasOwnProperty: ƒ hasOwnProperty()
  isPrototypeOf: ƒ isPrototypeOf()
  propertyIsEnumerable: ƒ propertyIsEnumerable()
  toLocaleString: ƒ toLocaleString()
  toString: ƒ toString()
  valueOf: ƒ valueOf()
  __defineGetter__: ƒ __defineGetter__()
  __defineSetter__: ƒ __defineSetter__()
  __lookupGetter__: ƒ __lookupGetter__()
  __lookupSetter__: ƒ __lookupSetter__()
  get __proto__: ƒ __proto__()
  set __proto__: ƒ __proto__()
}

What is the prototype chain?

The prototype chain is what makes inheritance possible. Every object in JavaScript inherits the prototype Object. You can walk up the prototype chain until you hit null.

console.log(Object.getPrototypeOf(user)); /* => 
{
  getAge: ƒ ()
  getFullName: ƒ ()
  constructor: ƒ Person(firstName, lastName, age)
  __proto__: Object
}
*/
console.log(Object.getPrototypeOf(Object.getPrototypeOf(user))); /* =>
{
  constructor: ƒ Object()
  hasOwnProperty: ƒ hasOwnProperty()
  isPrototypeOf: ƒ isPrototypeOf()
  propertyIsEnumerable: ƒ propertyIsEnumerable()
  toLocaleString: ƒ toLocaleString()
  toString: ƒ toString()
  valueOf: ƒ valueOf()
  __defineGetter__: ƒ __defineGetter__()
  __defineSetter__: ƒ __defineSetter__()
  __lookupGetter__: ƒ __lookupGetter__()
  __lookupSetter__: ƒ __lookupSetter__()
  get __proto__: ƒ __proto__()
  set __proto__: ƒ __proto__()
}
*/
console.log(
  Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(user)))
); // => null

Thanks for checking out this post. Please leave feedback on what can be improved/corrected. I always want to learn more.

JavaScript Classes Explained

Joseph Lynn — Wed, 14 Jul 2021 21:26:53 +0000

Classes are a great way to organize code and make more code reusable. Think of classes as code blueprints - you can use them to create a new instances. Think of an instance as new data (or context) that follow the same data structure. Every instance is unique and contains different data.

Let's build a simple example to understand the basics of Object-oriented programming (OOP).

You can view the code sandbox for a more interactive way to follow and mess around with the code (recommended to fork and try out yourself): code sandbox

Class syntax

class Employee {
  constructor() {

  }
}

What is a class?

Classes are functions that create new objects. If you check the type of Employee. It is a function. If you check the type of new Employee, you will see when a class is instantiated - you are creating an object.

MDN Docs (Classes)
MDN Docs (instance variables)

console.log(typeof Employee) // => function
console.log(typeof new Employee) // => object

Define a class

/* 
its common practice to upper case the first character of every word 
with the rest in lower case (called UpperCamelCase)
*/
class Employee {
  /* 
   When you create a new instance of a class, the constructor()
   function will be automatically called
   if your class need to accept any arguments - you will need to
   pass them to the constructor 
  */
  constructor(firstName, lastName, occupation) {
    /*
     now we need to create instance variables - that way the we
     can use them throughout the class
    */
    // capture firstName param into this.firstName instance variable
    this.firstName = firstName;
    // capture lastName param into this.lastName instance variable
    this.lastName = lastName;
    // capture occupation param into this.occupation instance variable
    this.occupation = occupation
  }
}

Create a new Employee

To create an instance of a class, you have to use the new keyword before the name of the class. Let's create two new instances (instantiation) of an Employee and console.log() the variable we create. Each instance is different and the data passed to each instance is encapsulated.

const employee1 = new Employee("Joe", "Lynn", "Developer") 
console.log(employee1); /* => 
  Employee { 
    firstName: 'Joe', 
    lastName: 'Lynn', 
    occupation: 'Developer' 
  }
 */
const employee2 = new Employee("Sierra", "Lynn", "Photographer")
console.log(employee2); /* => 
  Employee { 
    firstName: 'Sierra',
    lastName: 'Lynn', 
    occupation: 'Photographer' 
  } 
*/

Create an instance method

Instance methods are functions that can be called on an instance of a class. Write a function inside the class and then we are able to call it on an instance (employee1 or employee2).

MDN Docs (instance variables)

class Employee {
  constructor(firstName, lastName, occupation) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.occupation = occupation;
  }

  // create a function inside the class
  logEmployeeInfo() {
    // here we are just going to log all of the employee information
    // we can use the instance variables created in the constructor
    console.log(
      `Employee ${this.firstName} ${this.lastName} is working as a ${this.occupation}`
    );
  }
}

Now to use this method, we are going to call it on the instances we created using dot notation.

console.log(employee1.logEmployeeInfo()) // => 
// "Employee Joe Lynn is working as a Developer"
console.log(employee2.logEmployeeInfo()) // =>
// "Employee Sierra Lynn is working as a Photographer

Getters & Setters

Getters and setters are often mostly used for validating or modifying values. An advantage of using setters and getters is being able to control how a value if stored and returned. For example, let's say we always want to make sure the firstName is always a string. We can define a setter for the firstName property.

MDN Docs (setters)

  // define a setter by creating a function with the keyword "set" prefixing the function name
  set firstName(value) {
    // common practice to use an "_" as a prefix to a show that the property should not be accessed from the outside
    // the variable in the setter should NOT be the same as the instance variable declared in the constructor. That would create an infinite loop because when you try to access this.firstName within the class, JavaScript will automatically call the setter function. 
    this._firstName = String(value)
  }

Now we can define a getter

  // define a getter by creating a function with the keyword "get" prefixing the function name
  get firstName() {
    // return the _firstName value from the setter
    return this._firstName
  }

When we call the method firstName on an instance, we will get the firstName value

console.log(employee1.firstName) // => "Joe"
console.log(employee2.firstName) // => "Sierra"

Class inheritance

With classes you can create new objects based on a "parent" object. By extending a class you create a child class that gives you access to the same methods and behavior as the parent class (called inheritance).

Reference: MDN Docs (Inheritance)

Here's a quick example:

// class inheritance 
class Manager extends Employee {}

const manager1 = new Manager("Brian", "Smith", "CEO");
console.log(manager1); // =>
/*
  Manager {
    firstName: "Brian", 
    lastName: "Smith", 
    occupation: "CEO",
  }
*/
console.log(manager1.logEmployeeInfo()) // =>
// Employee Brian Smith is working as a CEO

Why extend a class?

The main reason to extend a class is to reduce code duplication. You can create a new class (like the Manager class) and add new functionality or change functionality. Let's change what gets logged when we call the logEmployeeInfo method.

Reference: MDN Docs (extends)

class Manager extends Employee {
  logEmployeeInfo() {
    console.log(
      `The owner of the company is ${this.firstName} ${this.lastName} and is the ${this.occupation}`
    )
  }
}

console.log(manager1.logEmployeeInfo()); // =>
// "The owner of the company is Brian Smith and is the CEO"

Super

What if we want to accept different arguments into the new Manager class we just created? We can use the super keyword which is used to access and call functions on an object's parent. This makes it so we can override the parent's constructor.

Reference: MDN Docs (super)

class Manager extends Employee {
  constructor(firstName, lastName, occupation, age) {
    // super() calls the parent class' constructor.
    super(firstName, lastName, occupation); // super must be called first
    this.age = age; // new parameter 
}

  logEmployeeInfo() {
    console.log(
      `The owner of the company is ${this.firstName} ${this.lastName} and is the ${this.occupation} and is ${this.age} years old`
    )
  }
}

// third example 
const manager2 = new Manager("Jade", "Smith", "CEO", 35);
console.log(manager2); // =>
/*
  Manager {
    firstName: "Jade"
    lastName: "Smith"
    occupation: "CEO"
    age: 35
  }
*/
console.log(manager2.logEmployeeInfo()) // =>
// "The owner of the company is Jade Smith and is the CEO and is 35 years old"

Thanks for checking out this post. Please leave feedback on what can be improved.

Optional Chaining (objects & arrays)

Joseph Lynn — Thu, 10 Jun 2021 12:34:20 +0000

Optional chaining can be really useful to help with potential errors when accessing a property of an object. It allows you to access a property deep within an object without risking an error if one of the properties is nullish (null or undefined).

Optional chaining is used to access a property that may or may not exist.

Reference: MDN docs

Optional Chaining (objects)

The syntax is to use dot notation but with a ? in front of the dot. Here's an example:

const user = {
  name: 'Joe',
  age: 27,
  settings: {
    theme: {
      mode: 'dark',
      text: '#d7e0ff',
      background: '#f87070',
      font: 'Kumbh Sans, sans-serif'
    },
  },
  friends: ['Brandon', 'Brian', 'Isaac'],
}

console.log(user?.settings?.theme) /* => { mode: 'dark', text:
'#d7e0ff', background: '#f87070', font: 'Kumbh Sans, sans-serif' }
*/

Optional Chaining (arrays)

The benefit of optional chaining on an array is that if the results were null or undefined, your code won't break. It will short-circuit and return undefined.

const user = {
  name: 'Joe',
  age: 27,
  settings: {
    theme: {
      mode: 'dark',
      text: '#d7e0ff',
      background: '#f87070',
      font: 'Kumbh Sans, sans-serif'
    },
  },
  friends: ['Brandon', 'Brian', 'Isaac'],
}

/*
// variable to hold the data
let firstArrayValue = '';

// instead of using an if condition 
if (user.friends) {
  firstArrayValue = user?.friends?.[0];
}
*/

// use optional chaining 
const firstArrayValue = user?.friends?.[0]
console.log(firstArrayValue) // => 'Brandon'

Important notes

You can only use optional chaining on an object that exists.
Optional chaining is only used for reading. It cannot be used for assignment.

// profile is not defined 
console.log(profile?.settings?.theme)

// Syntax error (Optional chaining cannot appear in left-hand side)
user?.settings?.theme = 'light'

API requests with React (using the fetch API)

Joseph Lynn — Fri, 28 May 2021 13:07:03 +0000

Often times you will find yourself needing to pull data into your React app. In this tutorial, we will be using the fetch API - a browser API that lets you make network requests. With this API you can send and retrieve data from your own backend or third party API.

You can checkout the code sandbox to see the code.

Fetch API structure

To use the fetch API for a get request, follow this structure:

fetch("https://chroniclingamerica.loc.gov/search/pages/results/?andtext=florid&format=json")
.then(response => response.json())
.then(data => {
    console.log(data);
});

1. Add useEffect hook

Let's put this into a useEffect hook:

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  useEffect(() => { 
    fetch("https://chroniclingamerica.loc.gov/search/pages/results/?andtext=florid&format=json")
    .then(response => response.json())
    .then(data => {
      console.log(data);
  // make sure to add the empty dependency array, or you will end 
  // up in an infinite loop
  }, [])

2. Create simple state

We want to create 2 pieces of state. One to hold the data we get back from the request and one to toggle the loading state:

  // we will use this state to set the data we get back from the 
fetch request
  const [newsPapers, setNewsPapers] = useState([]);
  // it's good practice to have a loading state - this will help 
  // if we want to display a loader component or disable a button 
  // to stop users from repeatedly clicking and possibly breaking the application
  const [isLoading, setIsLoading] = useState(false);

3. Refine the fetch get request

We are missing a couple elements here. We are not handling an error and we need to change the loading state:

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  // we will use this state to set the data we get back from the 
  // fetch request
  const [newsPapers, setNewsPapers] = useState([]);
  // it's good practice to have a loading state - this will help 
  // if we want to disable a button to stop users from repeatedly 
  // clicking and possibly breaking the application
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    // set the loading state to true - since this is a promise, we 
    // know this will resolve sometime in the future
    setIsLoading(true);
    // to start - use fetch with a url argument
    fetch(
      "https://chroniclingamerica.loc.gov/search/pages/results/?andtext=florid&format=json"
    )
      // resolve with a .then() and use the .json() method to 
      // extract the JSON body content from the response - 
      // otherwise you will just get the HTTP response
      .then((response) => response.json())
      // now the data is in json format, we can use it. Just log 
      // the data to see if you get the correct response
      .then((data) => {
        console.log(data);
      })
      // make sure to catch any error that occurs (just console 
      // logging in this case)
      .catch((error) => console.log(error))
      // we can use the .finally() handler to set loading to false
      // finally returns a promise, and is called in both cases 
      // of fulfilled (successful) or rejected (error)
      .finally(() => setIsLoading(false));
  }, []);

  return (
    <div className="App">
      <h1>Hello Fetch API</h1>
    </div>
  );
}

We should see the data coming back from the fetch request.

4. Set the data in state

Let's set the data into the newsPapers state:

      .then((data) => {
        console.log(data);
        // if there is data
        if(data) {
          // use the data returned to set the newsPapers state 
          setNewsPapers(data)
        }
      })

The data will be set in state now.

5. Use the data in JSX

A common error is when you try to print out the data <h3>There are {newsPapers.items.length} newspapers</h3>. This will return Cannot read property 'length' of undefined. Why is that? It breaks because we are trying to render out data that doesn't exist yet. Remember, that fetch is asynchronous, so when we first try to log the data in the JSX, it doesn't exist yet. We can fix this with conditional rendering or using the logical && operator:

// logical && operator 
  return (
    <div className="App">
      <h1>Hello Fetch API</h1>
      {/* render newsPapers.items.length only if newsPapers.items exists */}
      <h3>There are {newsPapers.items && newsPapers.items.length} newspapers</h3>
    </div>
  );

// conditional rendering 
  return (
    <div className="App">
      <h1>Hello Fetch API</h1>
      {/* render newsPapers.items.length only if newsPapers.items exists */}
      <h3>There are {!newsPapers.items ? null : newsPapers.items.length} newspapers</h3>
    </div>
  );

You should have a number appear now with no errors.

Final code

Final code with a very simple loader.

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  // we will use this state to set the data we get back from the fetch request
  const [newsPapers, setNewsPapers] = useState([]);
  // it's good practice to have a loading state - this will help if we want to disable a button to stop users from repeatedly clicking and possibly breaking the application
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    // set the loading state to true - since this is a promise, we know this will resolve sometime in the future
    setIsLoading(true);
    // to start - use fetch with a url argument
    fetch(
      "https://chroniclingamerica.loc.gov/search/pages/results/?andtext=florid&format=json"
    )
      // resolve with a .then() and use the .json() method to extract the JSON body content from the response - otherwise you will just get the HTTP response
      .then((response) => response.json())
      // now the data is in json format, we can use it. Just log the data to see if you get the correct response
      .then((data) => {
        console.log(data);
        // if there is data
        if(data) {
          // use the data returned to set the newsPapers state 
          setNewsPapers(data)
        }
      })
      // make sure to catch any error that occurs (just console logging in this case)
      .catch((error) => console.log(error))
      // we can use the .finally() handler to set loading to false - finally returns a promise, and is called in both cases of fulfilled (successful) or rejected (error)
      .finally(() => setIsLoading(false));
  }, []);

  console.log(newsPapers)
  return (
    <div className="App">
      <h1>Hello Fetch API</h1>
      {/* Simple example showing loading */}
      {isLoading && <p>Loading...</p>}
      {/* render newsPapers.items.length only if newsPapers.items exists */}
      <h3>There are {!newsPapers.items ? null : newsPapers.items.length} newspapers</h3>
    </div>
  );
}

Thanks for reading!

8 JavaScript array methods you should know

Joseph Lynn — Wed, 26 May 2021 14:34:21 +0000

With most of these methods, you need to understand callbacks. A callback is a function passed as an argument to another function. When using the methods below - JavaScript will take your callback and call it for every single item in the array.

This is not an exhaustive list of array methods. Some will include a "Try it out" section. Try these methods out in the code sandbox.

Array.filter()

/* 
The filter() method creates a new array with all elements that 
pass the test implemented by the provided function.

If the callback function returns true, then the item will be 
included in the final array, if the callback returns false, then 
the item will **NOT** be included in the final array.
*/

const grades = [50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100];

const passingGrades = grades.filter(grade => {
  return grade >= 70
})

console.log(passingGrades) // => [70, 75, 80, 85, 90, 95, 100]

Try it out

const grades = [50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100];
// TODO - find all grades that are greater or equal to 90:
// 1. create a variable that will hold the new array
// 2. return an array of grades that are 90 or greater

Reference: MDN docs: Array.prototype.filter()

Array.find(callback)

/*
The find() method returns the value of the first element in the 
provided array that satisfies the provided testing function. If no 
values satisfy the testing function, undefined is returned.

You will get back the first item that matches the condition that 
you specify. If no items were found, you will get back undefined.
*/

const ids = [1, 2, 3, 4, 5, 6, 7, 8, 9]

const findId5 = ids.find(id => {
  return id === 5
})

console.log(findId5) // => 5

Try it out

const ids = [1, 2, 3, 4, 5, 6, 7, 8, 9]
// TODO - find id 7:
// 1. create a variable that will hold the value that's found
// 2. return the id 7

Reference: MDN docs: Array.prototype.find()

Array.includes(item)

/*
The includes() method determines whether an array includes a 
certain value among its entries, returning true or false as 
appropriate.

Returns true when an item exists in the array and false otherwise.
*/

const groceries = ['apples', 'bananas', 'bread', 'milk']

console.log(groceries.includes('apples')) // => true

Try it out

const groceries = ['apples', 'bananas', 'bread', 'milk']
// TODO - find 'bread' and try 'cereal':
// 1. console.log passing in a string argument to includes()

Reference: MDN docs: Array.prototype.includes()

Array.indexOf(item)

/*
The indexOf() method returns the first index at which a given 
element can be found in the array, or -1 if it is not present.
*/

const groceries = ['apples', 'bananas', 'bread', 'milk']

console.log(groceries.indexOf('bread')) // => 2

Try it out

const groceries = ['apples', 'bananas', 'bread', 'milk']
// TODO - find the index of 'milk' and what happens when you try 'cereal':
// 1. console.log passing in a string argument to indexOf()

Reference: MDN docs: Array.prototype.indexOf()

Array.every(callback)

/*
The every() method returns true when every item in the array 
satisfies the condition provided in the callback.
*/

const nums = [10, 15, 20, 25]
const allAbove10 = nums.every(num => num >= 10); 
const allAbove15 = nums.every(num => num >= 15); // => false

console.log(allAbove10) // => true
console.log(allAbove15) // => false

Reference: MDN docs: Array.prototype.every()

Array.some(callback)

/*
It returns true if, in the array, it finds an element for which 
the provided function returns true; otherwise it returns false. It 
doesn't modify the array. 

The some() method returns true when at least one item in the array 
satisfies the condition provided in the callback.
*/

const nums = [10, 15, 20, 25]
const someOver18 = nums.some(num => num >= 18); 
const someUnder10 = nums.some(num => num < 10); 

console.log(someOver18) // => true
console.log(someUnder10) // => false

Reference: MDN docs: Array.prototype.some()

Array.map(callback)

/*
The map() method creates a new array populated with the results of 
calling a provided function on every element in the calling array.

You always get back an array containing the same number of items 
compared to the original array, but every item has most likely 
undergone some transformation. Make sure to return inside the map, 
otherwise you will get back undefined.  
*/

const names = ["joe", "sierra", "norah", "oliver"];

const upperCaseNames = names.map((name) => {
  return name.toUpperCase();
});

console.log(upperCaseNames); // => ["JOE", "SIERRA", "NORAH", "OLIVER"]

Try it out

const names = ["joe", "sierra", "norah", "oliver"];
// TODO - lowercase the names:
// 1. create a variable that will hold the new array values
// 2. return the lowercased names

Reference: MDN docs: Array.prototype.map()

Array.forEach(callback)

/*
The forEach() method iterates over every item in an array. 
It executes a provided function once for each array element.

It will always look for the first parameter you define in your 
callback function and pass to it the correct value.
*/

const numbers = [10, 15, 20, 25, 30, 35, 40, 45, 50]

const eachNumber = numbers.forEach(number => {
  console.log(number)
})

console.log(eachNumber)

// OR sum numbers 

const numbers = [10, 15, 20, 25, 30, 35, 40, 45, 50]

function sumNumbers(numbers) {
  let sum = 0;
  numbers.forEach(number => {
    if(number % 2 !== 0) {
      sum += number
    }
  })
  return sum
}

console.log(sumNumbers(numbers)) // => 120

Try it out

const numbers = [10, 15, 20, 25, 30, 35, 40, 45, 50]
// TODO - sum all even numbers:
// 1. create a function that takes an array parameter
// 2. create a variable to hold the sum
// 3. loop over the numbers array
// 4. check (inside the foreach if the current number is even) - if it is even, add the number to the sum
// 5. return the sum

Reference: MDN docs: Array.prototype.forEach()

How to build a React CRUD todo app (refactor)

Joseph Lynn — Sun, 23 May 2021 13:09:38 +0000

In this series, we have built a todo application.

I suggest following along and if you get stuck, you can fork the code from the Code Sandbox.

In the previous posts, added the ability to edit todos. We have full CRUD functionality, but the application could be structured better, lets work on that.

There are a couple benefits of breaking up components:

Reusability - you are able to use a component anywhere in the application.
Isolation - it's helps with isolating bugs found in your code.

This is known as abstraction

1. Refactor todo item into it's own component

Start by moving the todo item to it's own component.

Create a new file called TodoItem.js.
Add the li item from the App.js file

We are going to change the names of props that are functions. It's standard convention to change the name for props that are functions to start with onSubjectEvent. The TodoItem.js should look like this.

// notice we are destructuring the props here. You could change this to 
// bring in props instead and then just add `props.` to todo, onEditClick and onDeleteClick:
// export default function TodoItem(props)
export default function TodoItem({
  // passing the todo as a prop
  todo,
  // notice the name change of the function handleEditClick to onEditClick 
  onEditClick,
  // notice the name change of the function handleDeleteClick to onDeleteClick
  onDeleteClick
}) {
  return (
    // using the li element as the parent 
    <li key={todo.id}>
      {todo.text}
      {/* don't forget to change the name of the functions */}
      <button onClick={() => onEditClick(todo)}>Edit</button>
      <button onClick={() => onDeleteClick(todo.id)}>Delete</button>
    </li>
  );
}

Import the TodoItem component into the App.js
Use the TodoItem and pass the required props to it

2. Refactor add todo form to it's own component

Start by moving the form for to add a new todo into a new file.

Create a new file called AddTodoForm.js
Add the form element to add a new todo from the App.js file to our new AddTodoForm.js file

Again, we are going to change the names of props that are functions. The AddTodoForm.js should look like this.

export default function AddTodoForm({
  // passing the todo as a prop
  todo,
  // notice the name change of the function handleAddFormSubmit to onAddFormSubmit
  onAddFormSubmit,
  // notice the name change of the function handleAddInputChange to onAddInputChange
  onAddInputChange
}) {
  return (
    // using the form element as the parent
    // notice the change for the function names in the onSubmit and onChange props
    <form onSubmit={onAddFormSubmit}>
      <h2>Add Todo</h2>
      <label htmlFor="todo">Create todo: </label>
      <input
        name="todo"
        type="text"
        placeholder="Create new todo"
        value={todo}
        onChange={onAddInputChange}
      />
    </form>
  );
}

Import the AddTodoForm component into the App.js file
Use the AddTodoForm.js and pass the required props to it

3. Refactor add edit form to it's own component

Start by moving the form for to edit a todo into a new file.

Create a new file called EditForm.js
Add the form element to edit a todo from the App.js file to our new EditForm.js file

As a reminder, we are going to change the names of props that are functions. The EditForm.js should look like this.

export default function EditForm({
  // still need the currentTodo 
  currentTodo,
  // also need to be able to toggle setIsEditing
  setIsEditing,
  // notice the name change of the function handleEditInputChange to onEditInputChange
  onEditInputChange,
  // notice the name change of the function handleEditFormSubmit to onEditFormSubmit
  onEditFormSubmit
}) {
  return (
    // using the form element as the parent 
    // notice the change for the function names in the onSubmit and onChange props
    <form onSubmit={onEditFormSubmit}>
      <h2>Edit Todo</h2>
      <label htmlFor="updateTodo">Update todo: </label>
      <input
        name="updateTodo"
        type="text"
        placeholder="Update todo"
        value={currentTodo.text}
        onChange={onEditInputChange}
      />
      <button type="submit" onClick={onEditFormSubmit}>
        Update
      </button>
      <button onClick={() => setIsEditing(false)}>Cancel</button>
    </form>
  );
}

Import EditForm.js component into the App.js file
Use the EditForm.js and pass the required props to it

4. Put it all together

After making the changes, we should have a file structure like this
App.js file:

// App.js file 
import { useEffect, useState } from "react";
import TodoItem from "./TodoItem";
import AddTodoForm from "./AddTodoForm";
import EditForm from "./EditForm";
import "./styles.css";

export default function App() {
import { useEffect, useState } from "react";
import TodoItem from "./TodoItem";
import AddTodoForm from "./AddTodoForm";
import EditForm from "./EditForm";
import "./styles.css";

export default function App() {
  const [todos, setTodos] = useState(() => {
    const savedTodos = localStorage.getItem("todos");
    if (savedTodos) {
      return JSON.parse(savedTodos);
    } else {
      return [];
    }
  });
  const [todo, setTodo] = useState("");
  const [isEditing, setIsEditing] = useState(false);
  const [currentTodo, setCurrentTodo] = useState({});

  useEffect(() => {
    localStorage.setItem("todos", JSON.stringify(todos));
  }, [todos]);

  function handleAddInputChange(e) {
    setTodo(e.target.value);
  }

  function handleEditInputChange(e) {
    setCurrentTodo({ ...currentTodo, text: e.target.value });
    console.log(currentTodo);
  }

  function handleAddFormSubmit(e) {
    e.preventDefault();

    if (todo !== "") {
      setTodos([
        ...todos,
        {
          id: new Date(),
          text: todo.trim()
        }
      ]);
    }

    setTodo("");
  }

  function handleEditFormSubmit(e) {
    e.preventDefault();

    handleUpdateTodo(currentTodo.id, currentTodo);
  }

  function handleDeleteClick(id) {
    const removeItem = todos.filter((todo) => {
      return todo.id !== id;
    });
    setTodos(removeItem);
  }

  function handleUpdateTodo(id, updatedTodo) {
    const updatedItem = todos.map((todo) => {
      return todo.id === id ? updatedTodo : todo;
    });
    setIsEditing(false);
    setTodos(updatedItem);
  }

  function handleEditClick(todo) {
    setIsEditing(true);
    setCurrentTodo({ ...todo });
  }

  return (
    <div className="App">
      {isEditing ? (
        <EditForm
          currentTodo={currentTodo}
          setIsEditing={setIsEditing}
          onEditInputChange={handleEditInputChange}
          onEditFormSubmit={handleEditFormSubmit}
        />
      ) : (
        <AddTodoForm
          todo={todo}
          onAddInputChange={handleAddInputChange}
          onAddFormSubmit={handleAddFormSubmit}
        />
      )}

      <ul className="todo-list">
        {todos.map((todo) => (
          <TodoItem
            todo={todo}
            onEditClick={handleEditClick}
            onDeleteClick={handleDeleteClick}
          />
        ))}
      </ul>
    </div>
  );
}

AddForm.js file:

// AddForm.js
export default function AddTodoForm({
  todo,
  onAddFormSubmit,
  onAddInputChange
}) {
  return (
    <form onSubmit={onAddFormSubmit}>
      <h2>Add Todo</h2>
      <label htmlFor="todo">Create todo: </label>
      <input
        name="todo"
        type="text"
        placeholder="Create new todo"
        value={todo}
        onChange={onAddInputChange}
      />
    </form>
  );
}

EditForm.js file:

// EditForm.js
export default function EditForm({
  currentTodo,
  setIsEditing,
  onEditInputChange,
  onEditFormSubmit
}) {
  return (
    <form onSubmit={onEditFormSubmit}>
      <h2>Edit Todo</h2>
      <label htmlFor="updateTodo">Update todo: </label>
      <input
        name="updateTodo"
        type="text"
        placeholder="Update todo"
        value={currentTodo.text}
        onChange={onEditInputChange}
      />
      <button type="submit" onClick={onEditFormSubmit}>
        Update
      </button>
      <button onClick={() => setIsEditing(false)}>Cancel</button>
    </form>
  );
}

Todoitem.js file:

// TodoItem.js
export default function TodoItem({
  todo,
  onEditClick,
  onDeleteClick
}) {
  return (
    <li key={todo.id}>
      {todo.text}
      <button onClick={() => onEditClick(todo)}>Edit</button>
      <button onClick={() => onDeleteClick(todo.id)}>Delete</button>
    </li>
  );
}

This is the fifth post in this series. Hope you enjoyed reading! If you have any suggestions/feedback, please let me know.

Thanks for checking out this series!

How to build a React CRUD todo app (edit todo)

Joseph Lynn — Thu, 20 May 2021 13:27:38 +0000

In this series, we will build a todo application.

To begin, we will go over a very basic way to build this application and revise as we gain more knowledge.

I suggest following along and if you get stuck, you can fork the code from the Code Sandbox.

In the previous posts, added the ability to delete todos. Now lets add the edit functionality.

1. Add more state

We need to add a couple more state values we can use to help us get the editing functionality.



  // boolean state to know if we are editing (this will let us display 
  // different inputs based on a condition (conditional rendering)
  const [isEditing, setIsEditing] = useState(false);
  // object state to set so we know which todo item we are editing
  const [currentTodo, setCurrentTodo] = useState({});

2. Setup onChange handler for edit input

Now lets setup an onChange handler for the new input we will create in the next step.



  // function to get the value of the edit input and set the new state
  function handleEditInputChange(e) {
    // set the new state value to what's currently in the edit input box
    setCurrentTodo({ ...currentTodo, text: e.target.value });
    console.log(currentTodo);
  }

3. Re-format JSX

We are going to make quite a few changes in the JSX. I'll break this down:

We need to check if we are in editing mode
If we are editing, then display the editing form
If we are not editing, then display the add todo form
The editing form has a couple additional buttons so the user can control what they would like to do



  return (
    <div className="App">
      {/* We need to conditionally render different inputs based on if we are in editing mode */}
      {isEditing ? (
        // if we are editing - display the edit todo input
        // make sure to add the handleEditFormSubmit function in the "onSubmit" prop
        <form onSubmit={handleEditFormSubmit}>
          {/* we've added an h2 element */}
          <h2>Edit Todo</h2>
          {/* also added a label for the input */}
          <label htmlFor="editTodo">Edit todo: </label>
          {/* notice that the value for the update input is set to the currentTodo state */}
          {/* also notice the handleEditInputChange is being used */}
          <input
            name="editTodo"
            type="text"
            placeholder="Edit todo"
            value={currentTodo.text}
            onChange={handleEditInputChange}
          />
          {/* here we added an "update" button element - use the type="submit" on the button which will still submit the form when clicked using the handleEditFormSubmit function */}
          <button type="submit">Update</button>
          {/* here we added a "Cancel" button to set isEditing state back to false which will cancel editing mode */}
          <button onClick={() => setIsEditing(false)}>Cancel</button>
        </form>
      ) : (
        // if we are not editing - display the add todo input
        // make sure to add the handleFormSubmit function in the "onSubmit" prop
        <form onSubmit={handleFormSubmit}>
          {/* we've added an h2 element */}
          <h2>Add Todo</h2>
          {/* also added a label for the input */}
          <label htmlFor="todo">Add todo: </label>
          {/* notice that the value is still set to the todo state */}
          {/* also notice the handleInputChange is still the same */}
          <input
            name="todo"
            type="text"
            placeholder="Create a new todo"
            value={todo}
            onChange={handleInputChange}
          />
          {/* here we just added a "Add" button element - use the type="submit" on the button which will still submit the form when clicked using the handleFormSubmit function */}
          <button type="submit">Add</button>
        </form>
      )}

      <ul className="todo-list">
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.text}
            {/* we are passing the entire todo object to the handleEditClick function*/}
            <button onClick={() => handleEditClick(todo)}>Edit</button>
            <button onClick={() => handleDeleteClick(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );

After adding the JSX, you should see the interface has changed some.

3. Handle when a user clicks "Edit" button

There are a few functions you see in the JSX above that we need to make in order to make this function.

Lets start with when a user clicks on the "Edit" button. We want the "Update" button and "Cancel" button, and change from the add todo input to the editing input.



  // function to handle when the "Edit" button is clicked
  function handleEditClick(todo) {
    // set editing to true
    setIsEditing(true);
    // set the currentTodo to the todo item that was clicked
    setCurrentTodo({ ...todo });
  }

  // for this to work, do not forget to use the handleEditClick function in the JSX - when its clicked we will pass the todo object as an argument
      <ul className="todo-list">
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.text}
            {/* we are passing the entire todo object to the handleEditClick function*/}
            <button onClick={() => handleEditClick(todo)}>Edit</button>
            <button onClick={() => handleDeleteClick(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>

Now we should see that the currentTodo is the todo we clicked on, which is getting us close. Notice how the todo text is now in the editing input.

4. Adding the updated text to the todos state

Here we will create a function that we will call when the form is submitted.



  // function to edit a todo item
  function handleUpdateTodo(id, updatedTodo) {
    // here we are mapping over the todos array - the idea is check if the todo.id matches the id we pass into the function
    // if the id's match, use the second parameter to pass in the updated todo object
    // otherwise just use old todo
    const updatedItem = todos.map((todo) => {
      return todo.id === id ? updatedTodo : todo;
    });
    // set editing to false because this function will be used inside a onSubmit function - which means the data was submited and we are no longer editing
    setIsEditing(false);
    // update the todos state with the updated todo
    setTodos(updatedItem);
  }

5. Call the handleUpdateTodo function

Last step is to actually update the todo item when the form is submitted.



  function handleEditFormSubmit(e) {
    e.preventDefault();

    // call the handleUpdateTodo function - passing the currentTodo.id and the currentTodo object as arguments
    handleUpdateTodo(currentTodo.id, currentTodo);
  }

6. Putting it all together

After doing everything mentioned above, you should have something that looks like this:



import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [todos, setTodos] = useState(() => {
    const savedTodos = localStorage.getItem("todos");
    if (savedTodos) {
      return JSON.parse(savedTodos);
    } else {
      return [];
    }
  });
  const [todo, setTodo] = useState("");
  // boolean state to know if we are editing (this will let us display
  // different inputs based on a condition (conditional rendering)
  const [isEditing, setIsEditing] = useState(false);
  // object state to set so we know which todo item we are editing
  const [currentTodo, setCurrentTodo] = useState({});

  useEffect(() => {
    localStorage.setItem("todos", JSON.stringify(todos));
  }, [todos]);

  function handleInputChange(e) {
    setTodo(e.target.value);
  }

  // function to get the value of the edit input and set the new state
  function handleEditInputChange(e) {
    // set the new state value to what's currently in the edit input box
    setCurrentTodo({ ...currentTodo, text: e.target.value });
    console.log(currentTodo);
  }

  function handleFormSubmit(e) {
    e.preventDefault();

    if (todo !== "") {
      setTodos([
        ...todos,
        {
          id: todos.length + 1,
          text: todo.trim()
        }
      ]);
    }

    setTodo("");
  }

  function handleEditFormSubmit(e) {
    e.preventDefault();

    handleUpdateTodo(currentTodo.id, currentTodo);
  }

  function handleDeleteClick(id) {
    const removeItem = todos.filter((todo) => {
      return todo.id !== id;
    });
    setTodos(removeItem);
  }

  // function to edit a todo item
  function handleUpdateTodo(id, updatedTodo) {
    // here we are mapping over the todos array - the idea is check if the todo.id matches the id we pass into the function
    // if the id's match, use the second parameter to pass in the updated todo object
    // otherwise just use old todo
    const updatedItem = todos.map((todo) => {
      return todo.id === id ? updatedTodo : todo;
    });
    // set editing to false because this function will be used inside a onSubmit function - which means the data was submited and we are no longer editing
    setIsEditing(false);
    // update the todos state with the updated todo
    setTodos(updatedItem);
  }

  // function to handle when the "Edit" button is clicked
  function handleEditClick(todo) {
    // set editing to true
    setIsEditing(true);
    // set the currentTodo to the todo item that was clicked
    setCurrentTodo({ ...todo });
  }

  return (
    <div className="App">
      {/* We need to conditionally render different inputs based on if we are in editing mode */}
      {isEditing ? (
        // if we are editing - display the edit todo input
        // make sure to add the handleEditFormSubmit function in the "onSubmit" prop
        <form onSubmit={handleEditFormSubmit}>
          {/* we've added an h2 element */}
          <h2>Edit Todo</h2>
          {/* also added a label for the input */}
          <label htmlFor="editTodo">Edit todo: </label>
          {/* notice that the value for the update input is set to the currentTodo state */}
          {/* also notice the handleEditInputChange is being used */}
          <input
            name="editTodo"
            type="text"
            placeholder="Edit todo"
            value={currentTodo.text}
            onChange={handleEditInputChange}
          />
          {/* here we added an "update" button element - use the type="submit" on the button which will still submit the form when clicked using the handleEditFormSubmit function */}
          <button type="submit">Update</button>
          {/* here we added a "Cancel" button to set isEditing state back to false which will cancel editing mode */}
          <button onClick={() => setIsEditing(false)}>Cancel</button>
        </form>
      ) : (
        // if we are not editing - display the add todo input
        // make sure to add the handleFormSubmit function in the "onSubmit" prop
        <form onSubmit={handleFormSubmit}>
          {/* we've added an h2 element */}
          <h2>Add Todo</h2>
          {/* also added a label for the input */}
          <label htmlFor="todo">Add todo: </label>
          {/* notice that the value is still set to the todo state */}
          {/* also notice the handleInputChange is still the same */}
          <input
            name="todo"
            type="text"
            placeholder="Create a new todo"
            value={todo}
            onChange={handleInputChange}
          />
          {/* here we just added a "Add" button element - use the type="submit" on the button which will still submit the form when clicked using the handleFormSubmit function */}
          <button type="submit">Add</button>
        </form>
      )}

      <ul className="todo-list">
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.text}
            {/* we are passing the entire todo object to the handleEditClick function*/}
            <button onClick={() => handleEditClick(todo)}>Edit</button>
            <button onClick={() => handleDeleteClick(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

You should be able to change the todo item text now!

This is the fourth post in this series. Keep in mind that in this post, we added the ability to edit a todo item in the app. We now have full CRUD functionality. However, I think this could be structured better. We will look at re-factoring the code into separate components in the next post.

Thanks for reading!

How to build a React CRUD todo app (delete todo)

Joseph Lynn — Wed, 19 May 2021 17:12:43 +0000

In this series, we will build a todo application.

To begin, we will go over a very basic way to build this application and revise as we gain more knowledge.

I suggest following along and if you get stuck, you can fork the code from the Code Sandbox.

In the previous posts, we created a very simple todo app that can add new todos and save the todos in localStorage. Now lets add the delete functionality.

1. Create the delete function

Here we are going to create the function we want to fire on a button click to remove a todo item from our todo array.



  // function to remove a todo item from the todo array
  function handleDeleteClick(id) {
    // here we are filtering - the idea is remove an item from the todo array on a button click
    const removeItem = todos.filter((todo) => {
      // return the rest of the todos that don't match the item we are deleting
      return todo.id !== id;
    });
    // removeItem returns a new array - so now we are setting the todos to the new array
    setTodos(removeItem);
  }

Add button to the JSX

Lets add a very basic button to the JSX.



      {/* create a ul to hold all of the list items */}
      <ul className="todo-list">
        {/* map over the todos array which creates a new li element for every todo
      (make sure to add the "key" prop using the unique todo.id value to the li element)
      remember this is an array of objects - so we need to access the property 
      "text" to get the value we want to display */}
        {todos.map((todo) => (
          // now we are adding a simple button that we can click on
          <li key={todo.id}>
            {/* Add the function we created above as the onClick handler 
          rememebr the handleDeletClick function needs to know which item we want to remove 
          so we need to pass the todo.id to the function - also on a side note,
          notice how we are calling the handleDeleteClick function, this makes sure we are not
          running the function on page load, but rather when the button is clicked */}
            {todo.text} <button onClick={() => handleDeleteClick(todo.id)}>X</button>
          </li>
        ))}
      </ul>

Now you should see a button with the text content "X" right next to a todo you add.

3. Put it all together

Final code up to this point should look something like this.



import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [todos, setTodos] = useState(() => {
    const savedTodos = localStorage.getItem("todos");
    if (savedTodos) {
      return JSON.parse(savedTodos);
    } else {
      return [];
    }
  });
  const [todo, setTodo] = useState("");

  useEffect(() => {
    localStorage.setItem("todos", JSON.stringify(todos));
  }, [todos]);

  function handleInputChange(e) {
    setTodo(e.target.value);
  }

  function handleFormSubmit(e) {
    e.preventDefault();

    if (todo !== "") {
      setTodos([
        ...todos,
        {
          id: todos.length + 1,
          text: todo.trim()
        }
      ]);
    }

    setTodo("");
  }

  function handleDeleteClick(id) {
    const removeItem = todos.filter((todo) => {
      return todo.id !== id;
    });
    setTodos(removeItem);
  }

  return (
    <div className="App">
      <form onSubmit={handleFormSubmit}>
        <input
          name="todo"
          type="text"
          placeholder="Create a new todo"
          value={todo}
          onChange={handleInputChange}
        />
      </form>

      <ul className="todo-list">
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.text} <button onClick={() => handleDeleteClick(todo.id)}>X</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

This is the third post in this series. Keep in mind that in this post, we added the ability to delete a todo item in the app. We will continue to add more functionality in the coming posts.

Thanks for reading!

How to build a React CRUD todo app (add localstorage)

Joseph Lynn — Tue, 18 May 2021 17:45:12 +0000

In this series, we will build a todo application.

To begin, we will go over a very basic way to build this application and revise as we gain more knowledge.

I suggest following along and if you get stuck, you can fork the code from the Code Sandbox

In the previous post, we created a very simple todo app that can add new todos. Lets now add a simple storage option for the todo list.

1. Adding the useEffect hook

We are going to use the useEffect hook to add to our application. This useEffect hook will be responsible to save new todos into localstorage.

see MDN docs on JSON.stringify

  // useEffect to run once the component mounts
  useEffect(() => {
    // localstorage only support storing strings as keys and values
    // - therefore we cannot store arrays and objects without converting the object
    // into a string first. JSON.stringify will convert the object into a JSON string
    localStorage.setItem("todos", JSON.stringify(todos));
    // add the todos as a dependancy because we want to update
    // localstorage anytime the todos state changes
  }, [todos]);

Now this is what we should have:

// don't forget to import useEffect from react
import { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  // need a state to keep track of todos
  const [todos, setTodos] = useState([]);
  // need state to keep track of the value in the input
  const [todo, setTodo] = useState("");

  // useEffect to run once the component mounts
  useEffect(() => {
    // localstorage only support storing strings as keys and values
    // - therefore we cannot store arrays and objects without converting the object
    // into a string first. JSON.stringify will convert the object into a JSON string
    // reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
    localStorage.setItem("todos", JSON.stringify(todos));
    // add the todos as a dependancy because we want to update the
    // localstorage anytime the todos state changes
  }, [todos]);

  // function to get the value of the input and set the new state
  function handleInputChange(e) {
    // set the new state value to what's currently in the input box
    setTodo(e.target.value);
  }

  // function to create a new object on form submit
  function handleFormSubmit(e) {
    // prevent the browser default behavior or refreshing the page on submit
    e.preventDefault();

    // don't submit if the input is an empty string
    if (todo !== "") {
      // set the new todos state (the array)
      setTodos([
        // copy the current values in state
        ...todos,
        {
          // setting a basic id to identify the object
          id: todos.length + 1,
          // set a text property to the value of the todo state and 
          // trim the whitespace from the input
          text: todo.trim()
        }
      ]);
    }

    // clear out the input box
    setTodo("");
  }

  return (
    <div className="App">
      {/* create a form element and pass the handleFormSubmit function 
      to the form using the onSubmit prop */}
      <form onSubmit={handleFormSubmit}>
        {/* create an input element - make sure to add the value prop 
        with the state value passed in and the onChange prop to update
        the state every time something is typed in the input */}
        <input
          name="todo"
          type="text"
          placeholder="Create a new todo"
          value={todo}
          onChange={handleInputChange}
        />
      </form>

      {/* create a ul to hold all of the list items */}
      <ul className="todo-list">
        {/* map over the todos array which creates a new li element for every todo
        (make sure to add the "key" prop using the unique todo.id value to the li element)
        remember this is an array of objects - so we need to access the property 
        "text" to get the value we want to display */}
        {todos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );

2. Restoring todos from localstorage (lazy initial state)

We are going to change the initial state to what's saved in localstorage.

see react docs on lazy initial state
see MDN docs on JSON.parse()

  // because localstorage is synchronous - that could slow down the application
  // instead of using an just an empty array as the initial state - we can use a function in its place,
  // which will only be executed on the initial render
  const [todos, setTodos] = useState(() => {
    // get the todos from localstorage
    const savedTodos = localStorage.getItem("todos");
    // if there are todos stored
    if (savedTodos) {
      // return the parsed JSON object back to a javascript object
      return JSON.parse(savedTodos);
      // otherwise
    } else {
      // return an empty array
      return [];
    }
  });

3. Put it all together

Now we should have simple storage solution for our todos.

// don't forget to import useEffect from react
import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  // need state to keep track of todos
  // because localstorage is synchronous - that could slow down the application
  // instead of using an just an empty array as the initial state - we can use a function in its place,
  // which will only be executed on the initial render
  // reference: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
  const [todos, setTodos] = useState(() => {
    // get the todos from localstorage
    const savedTodos = localStorage.getItem("todos");
    // if there are todos stored
    if (savedTodos) {
      // return the parsed the JSON object back to a javascript object
      return JSON.parse(savedTodos);
      // otherwise
    } else {
      // return an empty array
      return [];
    }
  });
  // need state to keep track of the value in the input
  const [todo, setTodo] = useState("");

  // useEffect to run once the component mounts
  useEffect(() => {
    // localstorage only support storing strings as keys and values
    // - therfore we cannot store arrays and objects without converting the object
    // into a string first. JSON.stringify will convert the object into a JSON string
    // reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
    localStorage.setItem("todos", JSON.stringify(todos));
    // add the todos as a dependancy because we want to update the
    // localstorage anytime the todos state changes
  }, [todos]);

  // function to get the value of the input and set the new state
  function handleIInputChange(e) {
    // set the new state value to what's currently in the input box
    setTodo(e.target.value);
  }

  // function to create a new object on form submit
  function handleFormSubmit(e) {
    // prevent the browser default behavior or refreshing the page on submit
    e.preventDefault();

    // don't submit if the input is an empty string
    if (todo !== "") {
      // set the new todos state (the array)
      setTodos([
        // copy the current values in state
        ...todos,
        {
          // setting a basic id to identify the object
          id: todos.length + 1,
          // set a text property to the value of the todo state and
          // trim the whitespace from the input
          text: todo.trim()
        }
      ]);
    }

    // clear out the input box
    setTodo("");
  }

  return (
    <div className="App">
      {/* create a form element and pass the handleFormSubmit function 
      to the form using the onSubmit prop */}
      <form onSubmit={handleFormSubmit}>
        {/* create an input element - make sure to add the value prop 
        with the state value passed in and the onChange prop to update
        the state every time something is typed in the input */}
        <input
          name="todo"
          type="text"
          placeholder="Create a new todo"
          value={todo}
          onChange={handleInputChange}
        />
      </form>

      {/* create a ul to hold all of the list items */}
      <ul className="todo-list">
        {/* map over the todos array which creates a new li element for every todo
        (make sure to add the "key" prop using the unique todo.id value to the li element)
        remember this is an array of objects - so we need to access the property 
        "text" to get the value we want to display */}
        {todos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

This is the second post in this series. Keep in mind that in this post, we added slightly more functionality to the app. We will continue to add more functionality in the coming posts.

Thanks for reading!

How to build a React CRUD todo app (create/read todos)

Joseph Lynn — Tue, 18 May 2021 15:23:25 +0000

In this series, we will build a todo application.

To begin, we will go over a very basic way to build this application and revise as we gain more knowledge.

I suggest following along and if you get stuck, you can fork the code from the Code Sandbox

1. Set the initial state

Lets start with creating a couple state values.

import { useState } from "react";
import "./styles.css";

export default function App() {
  // need state to keep track of todos
  const [todos, setTodos] = useState([]);
  // need state to keep track of the value in the input
  const [todo, setTodo] = useState("");

  return (
    <div className="App">
      <h1>Todo App</h1>
    </div>
  );
}

2. Build the JSX

Lets build out the skeleton of what we want to see on the screen.

import { useState } from "react";
import "./styles.css";

export default function App() {
  // need a state to keep track of todos
  const [todos, setTodos] = useState([]);
  // need state to keep track of the value in the input
  const [todo, setTodo] = useState("");

  return (
    <div className="App">
      {/* create a form element */}
      <form>
        {/* create an input element */}
        <input
          name="todo"
          type="text"
          placeholder="Create a new todo"
        />
      </form>

      {/* create a ul to hold all of the list items */}
      <ul className="todo-list">
        {/* map over the todos array which creates a new li element for every todo */}
        {todos.map((todo) => (
          <li>{todo}</li>
        ))}
      </ul>
    </div>
  );

Now we should have a simple input on the screen

3. Add todo functionality

We are going to create two functions to add new todos and keep track of the input value.

import { useState } from "react";
import "./styles.css";

export default function App() {
  // need a state to keep track of todos
  const [todos, setTodos] = useState([]);
  // need state to keep track of the value in the input
  const [todo, setTodo] = useState("");

    // function to get the value of the input and set the new state
  function handleInputChange(e) {
    // set the new state value to what's currently in the input box
    setTodo(e.target.value);
  }

  // function to create a new object on form submit
  function handleFormSubmit(e) {
    // prevent the browser default behavior or refreshing the page on submit
    e.preventDefault();

    // don't submit if the input is an empty string
    if (todo !== "") {
      // set the new todos state (the array)
      setTodos([
        // copy the current values in state
        ...todos,
        {
          // setting a basic id to identify the object
          id: todos.length + 1,
          // set a text property to the value of the todo state and 
          // trim the whitespace from the input
          text: todo.trim()
        }
      ]);
    }

    // clear out the input box
    setTodo("");
  }

  return (
    <div className="App">
      {/* create a form element */}
      <form>
        {/* create an input element */}
        <input
          name="todo"
          type="text"
          placeholder="Create a new todo"
        />
      </form>

      {/* create a ul to hold all of the list items */}
      <ul className="todo-list">
        {/* map over the todos array which creates a new li element for every todo */}
        {todos.map((todo) => (
          <li>{todo}</li>
        ))}
      </ul>
    </div>
  );

4. Finish the functionality

Now we need to use the functions we just built to actually make something happen.

import { useState } from "react";
import "./styles.css";

export default function App() {
  // need a state to keep track of todos
  const [todos, setTodos] = useState([]);
  // need state to keep track of the value in the input
  const [todo, setTodo] = useState("");

  // function to get the value of the input and set the new state
  function handleInputChange(e) {
    // set the new state value to what's currently in the input box
    setTodo(e.target.value);
  }

  // function to create a new object on form submit
  function handleFormSubmit(e) {
    // prevent the browser default behavior or refreshing the page on submit
    e.preventDefault();

    // don't submit if the input is an empty string
    if (todo !== "") {
      // set the new todos state (the array)
      setTodos([
        // copy the current values in state
        ...todos,
        {
          // setting a basic id to identify the object
          id: todos.length + 1,
          // set a text property to the value of the todo state and 
          // trim the whitespace from the input
          text: todo.trim()
        }
      ]);
    }

    // clear out the input box
    setTodo("");
  }

  return (
    <div className="App">
      {/* create a form element and pass the handleFormSubmit function 
      to the form using the onSubmit prop */}
      <form onSubmit={handleFormSubmit}>
        {/* create an input element - make sure to add the value prop 
        with the state value passed in and the onChange prop to update
        the state every time something is typed in the input */}
        <input
          name="todo"
          type="text"
          placeholder="Create a new todo"
          value={todo}
          onChange={handleInputChange}
        />
      </form>

      {/* create a ul to hold all of the list items */}
      <ul className="todo-list">
        {/* map over the todos array which creates a new li element for every todo
        (make sure to add the "key" prop using the unique todo.id value to the li element)
        remember this is an array of objects - so we need to access the property 
        "text" to get the value we want to display */}
        {todos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

Now you should start seeing the todos being added to the page.

This is the first post in this series. Keep in mind that this is the absolute basic functionality of the app. We will be adding more functionality in the other posts.

Thanks for reading!

React hooks - working with useEffect (lifecycle)

Joseph Lynn — Mon, 17 May 2021 17:23:11 +0000

Side Effects

Sometimes your component may have a side effect. Some examples of side effects are:

Getting data from an API
Changing the DOM manually
Using a DOM plugin outside of React (like a map)

There are two kinds of side effects, those that require cleanup and those that don't.

Effects without cleanup

You will not need to cleanup if you want an effect to run after every page render. This is the default behavior of useEffect (to run after the first render and every updated).

    import React, {useEffect} from "react";

    useEffect(() => {
        document.title = 'New Document Title';
    });

Effects with cleanup

Sometimes you will need to cleanup an effect to avoid a memory leak. React performs the cleanup after the component unmounts.

Component Lifecycle

1. Once, after component is added to the DOM (mounted)

To run an effect after a component has mounted, add a dependency array.

    import React, {useEffect} from "react";

    useEffect(() => {
        console.log("Run on component mount")
        // notice the `,` and `[]` 
    }, []);

2. Once, after component mounted and once before unmount

To run an effect after a component was unmounted, return a function inside the useEffect.

    import React, {useEffect} from "react";

    useEffect(() => {
        console.log("Run on component mount")
        // similar to the previous example, but with cleanup 
        return () => {
          console.log("Run after component unmounts")
        }
    }, []);

3. Run on every render

To run on every render, simply omit the comma and square brackets.

    import React, {useEffect} from "react";

    useEffect(() => {
        console.log("Run on component mount")
        // notice the `,` `[]` are no longer there  
    });

4. Conditional render (state change)

To re-render based on a specific state change, add the state to the dependency array.

    import React, {useEffect} from "react";
    const [stateChange, setStateChange] = useState(0)

    useEffect(() => {
        console.log("Run on component mount")
        // notice the `,` and `[]` are back and has the piece of state as a dependency  
    }, [stateChange]);

This quick tutorial shows you how to start using the useEffect hook and how you can change when the useEffect runs.

Thanks for reading!

React hooks - working with state (array of objects)

Joseph Lynn — Sat, 15 May 2021 11:10:37 +0000

How to declare initial state

To use the useState hook you will need to import it from React.

You can view the code sandbox for a more interactive way to follow and mess around with the code (recommended to fork and try out yourself): code sandbox.

Edit: I've also added how to edit/update the state using an input and a couple buttons. Found at the bottom of this post.



import React, {useState} from "react";

To keep track of the state, we need to call the useState hook with an initial value. Since useState returns an array we are able to destructure the current state value and a function that lets you update the state.

Here's what that looks like.



// variable name is up to you (state)
// then name your function, the variable name but with "set" as a prefix (setState)
const [state, setState] = useState([])

Creating the component

Let's start building a basic component. Here we will create the initial state to a basic component.



// import React and the useState hook
import { useState } from "react";
import "./styles.css";

// component function 
function SimpleArrayOfObjectsComponent() {
  // set the initial state (an array with 1 object to start (this can be an empty object to start))
  const [users, setUsers] = useState([
    {
      id: 1,
      name: "Joe",
      type: "admin"
    }
  ]);

export default SimpleArrayOfObjectsComponent;

Let's add a basic button to change the state and a spot in the DOM to see the state change.



  // JSX we want to return
  return (
    // parent div to hold the ul and li's
    <div className="App">
      <ul>
        {/* map over the users array */}
        {users.map((user) => (
          // display a <div> element with the user.name and user.type
          // parent element needs to have a unique key
          <div key={user.id}>
            <p>{user.name}</p>
            <p>{user.type}</p>
          </div>
        ))}
      </ul>
      <button onClick={handleAddNewUser}>Add user</button>
    </div>
  );

This is what we should have so far:

Creating component functionality

You will see we declared a function called "handleAddNewUser". That function doesn't exist yet. Lets create that.



  // delcare the function
  function handleAddNewUser() {
    // it's important to not mutate state directly, so here we are creating a copy of the current state using the spread syntax
    const updateUsers = [
      // copy the current users state
      ...users,
      // now you can add a new object to add to the array
      {
        // using the length of the array for a unique id
        id: users.length + 1,
        // adding a new user name
        name: "Steve",
        // with a type of member
        type: "member"
      }
    ];
    // update the state to the updatedUsers
    setUsers(updateUsers);
  }

Click the "Add user" button and you will see a new list item added to the state:

Add edit functionality

Adding more state



  // boolean state to know if we are editing (this will let us display
  const [isEditing, setIsEditing] = useState(false);
  // object state to set so we know which todo item we are editing
  const [currentUser, setCurrentUser] = useState({});

Edit functions to handle updating the state



// function to get the value of the edit input and set the new state
  function handleEditInputChange(e) {
    // set the new state value to what's currently in the edit input box
    setCurrentUser({ ...currentUser, name: e.target.value });
  }

  // function to handle when the "Edit user name" button is clicked
  function handleEditClick(user) {
    // set isEditing to true
    setIsEditing(true);
    // update the state to the updatedUsers
    setCurrentUser({ ...user });
  }

  function handleUpdateUser(id, updatedUser) {
    // here we are mapping over the users array - the idea is check if the user.id matches the id we pass into the function
    // if the id's match, use the second parameter to pass in the updated user object
    // otherwise just use old user
    const updatedObject = users.map((user) =>
      user.id === id ? updatedUser : user
    );
    // set editing to false because this function will be used inside an onSubmit function - which means the data was submited and we are no longer editing
    setIsEditing(false);
    // update the users state with the updated user
    setUsers(updatedObject);
  }

  function handleEditFormSubmit(e) {
    e.preventDefault();

    // call the handleUpdateTodo function - passing the currentUser.id and the currentUser object as arguments
    handleUpdateUser(currentUser.id, currentUser);
  }

JSX update to have an input and form when isEditing is true



  // JSX we want to return
  return (
    // parent div to hold the ul and li's
    <div className="App">
      {/* start - if the "edit user name" is clicked */}
      {currentUser.id && isEditing && (
        <form onSubmit={handleEditFormSubmit}>
          <input
            name="editTodo"
            type="text"
            placeholder="Edit todo"
            value={currentUser.name}
            onChange={handleEditInputChange}
          />
          <button type="submit">Update</button>
          <button onClick={() => setIsEditing(false)}>Cancel</button>
        </form>
      )}
      {/* end - edit form */}
      <button onClick={handleAddNewUser}>Add new user</button>
      <ul>
        {/* map over the users array */}
        {users.map((user) => (
          // display a <div> element with the user.name and user.type
          // parent element needs to have a unique key
          <div key={user.id}>
            <p>{user.name}</p>
            <p>{user.type}</p>
            {!isEditing && (
              <button onClick={() => handleEditClick(user)}>
                Edit user name
              </button>
            )}
          </div>
        ))}
      </ul>
    </div>
  );
}

This quick tutorial shows you how to setup basic state values using an array of objects and how you can return a new array state value.

Edit: I've also added how to edit/update the state using an input and a couple buttons.

Thanks for reading!