DEV Community: Jose C

Angular - Working with components hierarchy

Jose C — Tue, 04 Jan 2022 08:22:26 +0000

On Angular and other frontend frameworks or libraries like React or Next we work by creating components. This components allows us to:

Separate responsibilities.
Re-use code.
Makes coding easier.
Facilitates maintenance.

In order to achieve what I mentioned above we have to start thinking about some things before we start coding:

How many components do I need?
Which will be his responsibility?
Can I reuse it?

Based on components duties we can sort components into 2 groups:

Smart components: Keep all functions and are responsible for getting all the information shown on dumb components. They are also called application-level-components, container components or controllers.
Dumb components: Their only responsability is to show information or execute functions from the smart component. Also called presentation components or pure components.

Ok this is the theory but let’s see one example of smart and dumb components.

Components hierarchy in action

To start I will create a new angular app:



ng new angular-hierarchy-components --style=scss --routing=true --skipTests=true

I will create a very basic app that is just a list and a form and buttons to add and remove elements to that list. At first I will do everything on the app.component to later refactor it using smart and dumb components.

This is all my code on the app.component.ts and app.component.html:

app.component.ts:



export class AppComponent {
  title = 'angular-hierarchy-components';

  brands: string[] = [`Mercedes`, `Ferrari`, `Porsche`, `Volvo`, `Saab`];

  remove(id: number) {
    this.brands.splice(id, 1);
  }

  new(brand) {
    this.brands.push(brand.value);
  }
}

All I have is a brands list and 2 functions remove to remove brands from the list and new to add new brands to the list.

And this is the app.component.html:



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="container__form">
        <form #root="ngForm" (ngSubmit)="new(newBrand)">
          <input type="text" name="brand" #newBrand />
          <button type="submit" #sendButton>Add</button>
        </form>
      </div>
      <div class="container__brand" *ngFor="let brand of brands; let i = index">
        <div class="container__brand__name">
          {{ brand }}
        </div>
        <div class="container__brand__button">
          <input type="button" (click)="remove(i)" value="x" />
        </div>
      </div>
    </div>
  </body>
</html>

I have a form that when on submit runs the new function that adds a new brand to the brands list and a ngFor that prints each brand name and a button to execute the remove function that removes the brand from the list.

This code works perfectly but I see some weakness on init:

There’s no way to reuse the code that prints out the brand list and the button to remove the brands name. If I want to implement this functionality on the same app but for clothing brands I will have to repeat the code.
If the app keeps growing I will have to stack all the functionalities on the app.component.ts so after adding each functionality the app turns out to be more and more difficult to maintain.

To solve he points I mentioned above I will split my code on smart and dumb components.

I will start by creating the smart component that will contain:

The brands list.
The new method to add new brands to the list.
The remove method that removes brands from the list.

Splitting my code to smart and dumb components

Creating the smart component

To solve he points I mentioned above I will split my code on smart and dumb components.

I will start by creating the smart component that will contain:

The brands list.
The new method to add new brands to the list.
The remove method that removes brands from the list.

On the terminal I create the smart component as a regular one:



ng generate component smartComponent

Usually I create the smart components to use as pages so I name it like blogPage or something like that but for this case I will just call it smartComponent.

On this component I will move the code I had on my app.component.ts to smart-component.ts so now it will look like this:



export class SmartComponentComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}

  brands: string[] = [`Mercedes`, `Ferrari`, `Porsche`, `Volvo`, `Saab`];

  remove(id: number) {
    this.brands.splice(id, 1);
  }

  new(brand: string) {
    this.brands.push(brand);
  }
}

Nothing new yet.

Now I will have to remove the default content on the smart-component.component.html and set the layout to render the dumb components and I will have to create two dumb components:

One component for the form to add new brands.
Another to render the brands name and the remove button.

This is the layout:



<div class="container">
  <div class="container__form">
   <!-- here goes the brands form -->
  </div>
  <div class="container__brand" *ngFor="let brand of brands; let i = index">
   <!-- Here goes the brands name component -->
  </div>
</div>

Creating the dumb components

Creating the list-element component

Now let’s go to the dumb components.

First I will create the list-element components. This component will render one brand’s name and a button close to it to remove the brand from the list.

I create the component as a regular one:



ng generate component listElement

Now on the list-element.component.ts I have to define:

The brand 's name.
The brand’s id (actually the position on the brands name array).

But wait, we did not agree that the brands array and all the information was on the smart component? Yes. The smart component will hold all the information and functions but will pass the brand’s name and array position to the dumb component in our case list-element using angular input binding.

To do that we first have to import Input from @angular/core on the list-element.component.ts component:



import { Component, Input, OnInit } from '@angular/core';

Now we can use the @Import() decorator to define the values we are expecting:



@Input() brand: string;
@Input() id: number;

This way we are telling our component that he’s going to receive the brand's name and id (actually array position on the smart component).

Now let’s render the name and a button on the list-element.component.ts:



<div class="container__brand">
  <div class="container__brand__name">
    {{ brand }}
  </div>
  <div class="container__brand__button">
    <input type="button" value="x" />
  </div>
</div>

This way we can render the name and a button on the screen.

Now on this same component we have to implement a method that allows us to execute the remove method we have on the smart component.

To execute the remove function we defined on the smart component from the list-element component we have to use another functionality from angular called Output in conjunction with EventEmitter. This will allow us to “emit” events to the smart component in order to execute methods.

First let’s add the Output and EventEmitter to our import:



import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

Now I can use the @Output decorator and the EventEmitter:



@Output() removeEvent = new EventEmitter<number>();

And in my list-element.component.ts I will define a method that will trigger the EventEmitter when the user clicks on the remove button:



removeBrand(id: number) {
    this.removeEvent.emit(id);
}

This method will receive the array position of the brand and emit it to the smart component so the remove method on the smart componentis executed and the brand is removed from the list.

Now on the element-list.component.html we have to implement this method when the user clicks the remove button:



<div class="container__brand">
  <div class="container__brand__name">
    {{ brand }}
  </div>
  <div class="container__brand__button">
    <input type="button" (click)="removeBrand(id)" value="x" />
  </div>
</div>

Ok, now let's connect the smart component with the element-list component. The smart componentwill be responsible to loop the brands list and use the list-elementcomponent to render the brands name and a button to remove. On the smart-component.html we will use the element-list component and pass to it the brands name and array position:



<div class="container">
  <div class="container__form">
   <!-- here goes the new brand form component -->
  </div>
  <div class="container__brand" *ngFor="let brand of brands; let i = index">
    <app-list-element
      [brand]="brand"
      [id]="i"
      (removeEvent)="remove($event)"
    ></app-list-element>
  </div>
</div>

Let’s take a look at the app-list-element component tag. We can see we are using 3 parameters/attributes:

brand: it’s the brand’s name.
id: the array position for the brand.
(removeEvent): it’s the removing brand event.

brand and id uses [] and events uses () it’s the same we do in Angular when we use data-binding or any other event like click:

For binding data between components: [data].
For binding events: (event).

Ok we’re done with this now let’s go for the new brands form.

Creating the new brand component

First we create the new brand form component:



ng generate component newBrand

This component will only contain the new brand form and emit the new brand’s name to the smart component so I will start by importing Output and EventEmitter to emit the new value:



import { Component, EventEmitter, OnInit, Output } from '@angular/core';

And define the new EventEmitter in the component using the @Output decorator:



@Output() newEvent = new EventEmitter<string>();

And define a new method that will emit the new brand’s name to the smart component:



new(brand: { value: string; }) {
    this.newEvent.emit(brand.value);
  }

And on the new-brand.component.html I add the form and set it to execute the new method when submit:



<form #newBrand="ngForm" (ngSubmit)="new(newBrandInput)">
    <input type="text" name="brand" #newBrandInput />
    <button type="submit" #sendButton>Add</button>
</form>

Now we only have to connect the smart component to the new-brand component on the smart-component.component.html:



<div class="container">
  <div class="container__form">
    <app-new-brand (newEvent)="new($event)"></app-new-brand>
  </div>
  <div class="container__brand" *ngFor="let brand of brands; let i = index">
    <app-list-element
      [brand]="brand"
      [id]="i"
      (removeEvent)="remove($event)"
    ></app-list-element>
  </div>
</div>

On the new-brand tag component I have defined an event called newEvent and binded to the new method on smart-component.component.ts.

And that's all.

Here you can find a repository with 2 branches: first one without components hierarchy and a second one with the component hierarchy I showed you on this post.

React - Introduction to react router v6

Jose C — Thu, 16 Dec 2021 13:02:37 +0000

Installation

After creating our react app we have to install the react router v6 library to our project using npm:

npm install react-router-dom@6

And import the BrowserRouter to our index.js:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

Now our react application can now response to different urls.

Creating links

To create links on react we could try sing the regular html links and that would lets us navigate to different urls defined in our application but if you try you will realize that each time you click on a link you are reloading the whole page and that's something we don’t do on react as react works as single page application.

Instead we use Link from the react-router-dom package we installed earlier.

import { Link } from "react-router-dom";
import "./App.css";

const App = () => {
 return <Link to="/hotels">Hotels</Link>;
};

It's discrete but there's a link at the top left of our page but when clicking the page it doesn't get reloaded :) but it’s not showing nothing new :( thou it changes the current url :)

Defining routes

On my react example app I’ve created 2 pages:

Hotels list.
Form to add new hotels to the list.

So I need two routes. One for each page.

(follow me for more design tips 😏)

To create a those new routes that matches I will make use of Routes and Route from the react-router package.

import { useState } from "react";
import { Route, Routes } from "react-router";
import classes from "./app.module.css";
import Nav from "./components/Nav";
import Form from "./pages/Form";
import Hotels from "./pages/Hotels";

const App = () => {
  const hotelsArray = [
    {
      name: "Hotel Barcelona",
      rooms: 5,
      rating: 8,
    },
    {
      name: "Hotel Paris",
      rooms: 41,
      rating: 9,
    },
    {
      name: "Hotel Munich",
      rooms: 14,
      rating: 10,
    },
  ];

  const [hotels, setHotels] = useState(hotelsArray);

  const newHotelHandler = (hotel) => {
    setHotels((prevState) => [...prevState, hotel]);
  };

  return (
    <>
      <Nav />
      <div className={classes.container}>
        <Routes>
          <Route path="/hotels" element={<Hotels hotels={hotels} />} />
        </Routes>
        <Routes>
          <Route path="/new" element={<Form onSubmit={newHotelHandler} />} />
        </Routes>
      </div>
    </>
  );
};

export default App;

On the app I have the hardcoded list of initial hotels to set is as default state and the functions that adds new hotels and updates the state.

To navigate through the pages I’ve created a new component called nav that contains all the Links:

import classes from "./Nav.module.css";
import { Link } from "react-router-dom";

const Nav = () => {
  return (
    <div className={classes.nav}>
      <div className={classes.nav__container}>
        <Link style={{textDecoration: 'none', color: 'white'}} to="/hotels">Hotels</Link>
        <Link style={{textDecoration: 'none', color: 'white'}} to="/new">Add new</Link>
      </div>
    </div>
  );
};

export default Nav;

This way now I have a set of urls to navigate on my hotels app:

Params on url

Now I have a list of nice hotels and a form to add new ones but what if I want to check one hotel details. To do that It would be nice to have a parameterized url where to pass the hotel id so my react app can retrieve the hotel details.

To do it we have to define a new route in our app.js . I want that url to be /hotels/hotelID so my new route will be defined like this:

<Routes>
    <Route path="/hotels/:hotelId" element={<Details hotels={hotels} />} />        
</Routes>

And on a new page I will:

Read the hotel id from url.
Get the hotel details (actually what I will do is get the hotel position on the hotels list).

Reading the hotel id from the url

To do that we need to import the useParams hook from the react-router-dompackage and read the params:

import { useParams } from "react-router-dom";

const Details = () => {
  const params = useParams();

  return <h1>{params.hotelId}</h1>;
};

export default Details;

The params are the ones we've defined in the route path.

Getting the hotel details

import classes from "./Details.module.css";
import { Link, useParams } from "react-router-dom";

const Details = ({ hotels }) => {
  const params = useParams();
  const hotel = hotels[params.hotelId];

  return (
    <div className={classes.container}>
      <h1>Hotel: {hotel.name}</h1>
      <h2>Rooms: {hotel.rooms}</h2>
      <h3>Rating: {hotel.rating}/10</h3>
      <Link to="/hotels">
        <button className={classes.container__save}>Hotels</button>
      </Link>
    </div>
  );
};

export default Details;

To access to this url I've updated the hotels list component so each hotel now has a Link:
import { Link } from "react-router-dom";
import classes from "./Hotels.module.css";

const Hotels = ({ hotels }) => {
  return (
    <div className={classes.container}>
      {hotels.map((hotel, key) => {
        return (
          <Link to={`/hotels/${key}`} style={{textDecoration: 'none', color: 'black'}}>
            <div key={key} className={classes.element}>
              <h1>{hotel.name}</h1>
              <h2>Rooms: {hotel.rooms}</h2>
              <h3>Rating: {hotel.rating}/10</h3>
            </div>
          </Link>
        );
      })}
    </div>
  );
};

export default Hotels;

javascript

Navigate programmatically

Sometimes we may need to navigate our users programmatically. If you try the form to add new hotels to the list you will realize that after creating a new hotel you have to manually navigate to the hotels list with the top nav. It works but we can do it better.

At the Form.js component we have to import the useNavigate hook from the react-router-dom package.

import { useState } from "react";
import { useNavigate } from "react-router-dom";
import classes from "./Form.module.css";

const Form = ({ onSubmit }) => {
  const navigate = useNavigate();

  const [name, setName] = useState("");
  const [rooms, setRooms] = useState(0);
  const [rating, setRating] = useState(0);

  const nameHandler = (event) => {
    setName(event.target.value);
  };

  const roomsHandler = (event) => {
    setRooms(event.target.value);
  };

  const ratingHandler = (event) => {
    setRating(event.target.value);
  };

  const onSubmitHandler = () => {
      onSubmit({name: name, rooms: rooms, rating: rating});
      // After saving the hotel redirect the user to the hotels list
      navigate('/hotels')
  }

  return (
    <div className={classes.container}>
      <div className={classes.container__field}>
        <label>Hotel Name</label>
        <input onChange={nameHandler} type="text" />
      </div>
      <div className={classes.container__field}>
        <label>Rooms</label>
        <input onChange={roomsHandler} type="number" min="1" max="99" />
      </div>
      <div className={classes.container__field}>
        <label>Rating</label>
        <input onChange={ratingHandler} type="number" min="1" max="10" />
      </div>
      <button onClick={onSubmitHandler} className={classes.container__save}>Save</button>
    </div>
  );
};

export default Form;

Nested routes

Our hotels app now works better but theres another thing we could improve. There's two routes where one is child of another: /hotels and /hotels/:hotelId.

On this example they are just two routes but on larger apps this can be annoying so let's nested instead using relative paths:

import { useState } from "react";
import { Route, Routes } from "react-router";
import classes from "./app.module.css";
import Nav from "./components/Nav";
import Details from "./pages/Details";
import Form from "./pages/Form";
import Hotels from "./pages/Hotels";

const App = () => {
  const hotelsArray = [
    {
      name: "Hotel Barcelona",
      rooms: 5,
      rating: 8,
    },
    {
      name: "Hotel Paris",
      rooms: 41,
      rating: 9,
    },
    {
      name: "Hotel Munich",
      rooms: 14,
      rating: 10,
    },
  ];

  const [hotels, setHotels] = useState(hotelsArray);

  const newHotelHandler = (hotel) => {
    setHotels((prevState) => [...prevState, hotel]);
  };

  return (
    <>
      <Nav />
      <div className={classes.container}>
        <Routes>
          <Route path="/hotels">
            <Route path="" element={<Hotels hotels={hotels} />} />
            <Route path=":hotelId" element={<Details hotels={hotels} />} />
          </Route>
        </Routes>
        <Routes>
          <Route path="/new" element={<Form onSubmit={newHotelHandler} />} />
        </Routes>
      </div>
    </>
  );
};

export default App;

Here's link to github where you can download the project and try it and there's a demo

Introduction to CSS Grid - Part 1

Jose C — Sun, 05 Dec 2021 13:28:55 +0000

What is CSS Grid?

grid is a css feature that allows us to create page layouts using rows and columns. It kinda reminds me of the old days when we were using tables.

When using grid we always have a parent element and inside that parent element we have n child elements.

On the parent element is where we set the display: grid property and set the page layout establishing the number of rows and columns. This will define how the n child elements inside the parent element are placed in our layout.

Setting a grid container

First step is to create a parent element that will contain n child elements. To do that we have to use the display: grid or display: inline-grid property. Booth create a grid element but there’s a difference between them:

display: grid: creates a block level grid element.
display: grid: creates an inline level grid element.

All the elements inside this grid container will become grid items that will be placed in our rows and columns.

Columns

The columns are the vertical lines of the grid. There’s multiple properties related to grid columns:

grid-template-columns: sets the size of each column and how many columns we want in our grid.
grid-column-start: sets where the column starts in the grid.
grid-column-end: sets where the column ends in the grid.
grid-auto-columns: sets the default column size when it’s not specified.

Rows

The rows are the horizontal lines of the grid. As it happens with columns there’s multiple properties related to grid rows:

grid-template-rows: sets the size of the rows.
grid-auto-rows: sets the default row size when it’s not specified.

Gaps

The gaps are the spaces between each row and columns.We have 3 different properties to set the gap:

column-gap: sets the gap between columns.
row-gap: sets the gap between rows.
gap: sets the gap for both rows and columns.

Lines

The lines between columns are called column lines and the lines between rows are row lines. We can use this to span columns through more than one column.

Example

Setting a 3x3 grid container where each element has a background color.

.container {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;

  color: white;
}

.container__item {
  background-color: blueviolet;
  border: 1px solid red;
}

<div class="container">
      <div class="container__item">1</div>
      <div class="container__item">2</div>
      <div class="container__item">3</div>
      <div class="container__item">4</div>
      <div class="container__item">5</div>
      <div class="container__item">6</div>
      <div class="container__item">7</div>
      <div class="container__item">8</div>
      <div class="container__item">9</div>
</div>

This is the result:

Not beautiful at all but it shows a grid exactly as I defined it in the .container class. 3 rows and 3 columns where each column and row takes 1 fraction of all the available space. I used fr to set the size for the rows and columns. It’s similar to %, the fr takes fractions of all the available space but you can use %, px, rem whatever you need.

Now I will apply some gap between columns and rows. To do so I will add the gap property on my .container class:

.container {
...
  gap: 5px;
...
}

Another option is to set the gap specifically for rows and columns like this:

.container {
...
  column-gap: 5px;
  row-gap: 5px;
...
}

And the result is the same:

Now I will modify the columns so the first column takes the space of three columns. To do this I have to create a new css class and assign it to the first div.

.container__first__element {
  background-color: chartreuse;

  grid-column-start: 1;
  grid-column-end: 4;
}

Also I modified the .container class to remove the height: 100vh and changed the grid-template-rows: 1fr 1fr 1fr to set the rows size to 100px and this is the result:

.container {
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;

  column-gap: 5px;
  row-gap: 5px;

  color: white;
}

We can observe two thing here, the first element now takes 3 columns space and has a 100px row size as expected but this caused that now we don’t have 3x3 grid instead now this is a 3x4 grid and as I defined the size for 3 rows the fourth row now does not have a size.

To solve this we have two options: change the grid-template-rows to 4 columns or use the grid-auto-rows property I mentioned above to set a default size for when this things happen.

I will go for the second option:

.container {
  …
  grid-auto-rows: 100px;
  …
}

And now all the rows have the same size:

Now I will edit the .container class and rename the .container__first__element class to reuse my code to create a simple layout:

.container {
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr 6.5fr 0.5fr;
  grid-template-rows: 50px 100px 100px;
  grid-auto-rows: 100px;

  column-gap: 5px;
  row-gap: 5px;

  color: white;
}

.container__item {
  background-color: blueviolet;
  border: 1px solid red;
}

.container__nav {
  background-color: chartreuse;
  color: black;

  grid-column-start: 1;
  grid-column-end: 4;
}

.container__sidebar {
    background-color: darkgoldenrod;

    grid-row-start: 2;
    grid-row-end: 6;
}

I know the colors are ugly but thanks to the grid it’s so easy to build the layout.

There’s a lot more grid functions but I will keep it to the next post.

React - useEffect hook - A Quick Guide

Jose C — Wed, 24 Nov 2021 08:08:15 +0000

What is useEffect?

useEffect is a react built-in hook that allows us to run code on the mount, update and unmount stages of our components lifecycle.

The useEffect hook receives two parameters: one function to be executed and an array of dependencies.

Let's see some examples

On my app.js I’ve set two input numbers and one button alongside the Calculator component. We set the numbers on the inputs and when we click the button the states get updated and the component gets the number via props. Nothing fancy.

import { useRef, useState } from "react";
import "./App.css";
import Calculator from "./Calculator";

const App = () => {
  const inputA = useRef(0);
  const inputB = useRef(0);

  const [numbers, setNumbers] = useState({
    numberA: inputA.current.value,
    numberB: inputB.current.value,
  });

  const getTotalHandler = () => {
    setNumbers({
    numberA: +inputA.current.value,
    numberB: +inputB.current.value,
    });
  };

  return (
    <>
    <div className="container">
        <div>
        <label>Input A</label>
        <input type="number" ref={inputA} />
        </div>
        <div>
        <label>Input B</label>
        <input type="number" ref={inputB} />
        </div>
        <button onClick={getTotalHandler}>Calculate</button>
        <Calculator numberA={numbers.numberA} numberB={numbers.numberB} />
    </div>
    </>
  );
};

export default App;

I have this component called Calculator that receives via props numberA and numberB and returns the sum.

const Calculator = ({ numberA, numberB }) => {
  return <h1>The total is {numberA + numberB}</h1>;
};

export default Calculator;

Execute useEffect when the component gets mounted

Now I will use useEffect to execute a function that logs me when the component it’s mounted. First I import the useEffect hook from react.

import { useEffect } from "react";

To implement this hook I have to set a function to be executed and an array of dependencies and then my component looks like this:

import { useEffect } from "react";

const Calculator = ({ numberA, numberB }) => {
  useEffect(() => {
    console.log(`First render`);
  }, []);

  return <h1>The total is {numberA + numberB}</h1>;
};

export default Calculator;

In this case I left my dependency array empty as I just want this code to be executed when it’s rendered for the first time.

Now when I first load my component I see it on my console:

As the dependency array is empty this log will be executed only when the component gets mounted. If I update the App component state and update the Calculator props this log function will not execute again. Let’s check:

I’ve updated the numberA and numberB props but the function did not execute.

Execute useEffect each time the props gets updated

Now let’s execute a function each time the props get updated. This is useful to perform side effects based on new props for example to retrieve details from an api on the basis of a value received from props. At the end of the post there’s an example with this.

First I add a second useEffect to my previous code.

import { useEffect } from "react";

const Calculator = ({ numberA, numberB }) => {
  useEffect(() => {
    console.log(`First render`);
  }, []);

  useEffect(() => {
    console.log(`This gets executed each time the props are updated`);
  }, [numberA, numberB]);

  return <h1>The total is {numberA + numberB}</h1>;
};

export default Calculator;

This time I did not leave my dependencies array empty and I’ve added the numberA and numberB props on it so the useEffect hook knows that each time one of the props gets updated it has to run the function. Let’s check if it works:

Yes it does. Actually you will see that the first time the component gets mounted both useEffect hooks get executed.

Using useEffect to get data from an API each time the props get updated

Now I will show you how to take advantage of the useEffect hook to get data from an API each time the props of our component is updated.

For this example I’ve created a new component called Rick that uses an id received via props to get data from the Rick and Morty public api.

import { useState, useEffect } from "react";

const Rick = ({ id }) => {
  const [character, setCharacter] = useState(null);
  const [request, setRequest] = useState(`pendent`);

  useEffect(() => {
    setRequest(`pendent`);

    const getApiResults = (characterId) => {
    fetch(`https://rickandmortyapi.com/api/character/${characterId}`)
        .then((response) => response.json())
        .then((data) => {
        setCharacter(data);
        setRequest(`completed`);
        });
    };

    getApiResults(id);
  }, [id]);

  let content = ``;

  if (request === `completed`) {
    content = (
    <>
        <img src={character.image} alt={character.name} />
        <h1>{character.name}</h1>
    </>
    );
  }

  return content;
};

export default Rick;

From the app component I have a button that generates a random number and passes it via props to the Rick component. On the first render we just have the button:

But each time we click a random number it’s generated and passed via props. This triggers the useEffect function that gets the belonging Rick and Morty character based on that id:

javascript - Everything you always wanted to know about localStorage (but you were afraid to ask)

Jose C — Tue, 16 Nov 2021 08:12:18 +0000

What is the localStorage?

The localStorage is a read-only property of the window interface that allows us to access the Storage for the Document’ origin (aka the browser). It let us save key-value pairs on the user browser. This was introduced on HTML 5 and everything it’s stored as a String, but I will show you how to save JSON objects.

Hold on, localStorage is read-only but let's store data? localStorage is read-only because it's immutable/cannot be overwritten se it's not possible to assign it to another value but we can use it to store data. If this sounds confusing for you don't worry adn keep reading and you will see how to use localStorage to store and retrieve data to the browser easily.

localStorage vs sessionStorage

The difference between localStorage and sessionStorage it’s the expiration date: the localStorage data will persist until:

We delete the data.
User clears the browser data.

localStorage data won’t persist if the user is using incognito or private browsing.

sessionStorage data gets expired each time the page it’s reloaded.

Update: regarding of the sessionStorage lifetime as @arandomdev points out:

sessionStorage does survive a page reload, as the browser assigns a session to the tab, and as long as its open, that session will not be cleared. Only when the tab or the browser gets closed that a new session will be assigned and the old sessionStorage will be cleared and a new one will be created.

How to write on localStorage

Data on localStorage is stored as key-value pairs and must always be String. It’s also possible to store and retrieve JSON objects with a little workaround. The function responsible for writing on the localStorage is the setItem function.

Example:

// Saving user access token
localStorage.setItem('token', 'ksjakdkaugdka2i163mjbdja8y1');

We can check that the informations has been saved by opening the console (f12) and checking the application tab under Local Storage:

Storing objects

In this case I’m saving the personal access token from a user, but what if I have to store an object with the user's details? Let’s try it:

// 1. We define an Object;
const user = {name: 'John', surname: 'Connor', id: 2};

// 2. Try to store the Object:
localStorage.setItem('user', user);

And now check the application tab:

Well it has stored ‘something’ but the content it’s not accessible so it’s useless and if this was an API response we would have lost the response. So how can we store objects in localStorage?

Though localStorage works only with strings so we can make it work transforming the object to a String:

// 1. We define an Object;
const user = {name: 'John', surname: 'Connor', id: 2};

// 2. Transform the Object to String:
const userString = JSON.stringify(user);

// 3. Store the object:
localStorage.setItem('user', userString);

We can check it on the application tab:

The information is there, and more important, accessible.

How to read localStorage data

To read the localStorage data we use the getItem function and we need to know the key that keeps the data:

Example:

// Reading user access token from localStorage
const token = localStorage.getItem('token');
console.log(token);

Reading objects

Now let’s retrieve the object we stored earlier using the same getItem function.

const user = localStorage.getItem("user");
console.log(`Welcome ${user.name} ${user.surname}`);

We read the localStorage and try to console log a greeting message using the object’s name and surname properties on console and this is what we get:

The console is returning undefined for the name and surname. Why? because what we stored is not an object it is a String. To read objects from localStorage we need to transform it from String to Object. Let’s try again:

// 1. Reading the object as string
let user = localStorage.getItem("user");

// 2. Parsing the string to Object
user = JSON.parse(user)

// 3. Now we can access the object properties.
console.log(`Welcome ${user.name} ${user.surname}`);

How to find all localStorage keys

We can get an array with all the keys using Object.keys:

const keys = Object.keys(localStorage);
console.log(keys);

How to remove data

To remove data from localStorage we have 2 options:

Delete one item

We can use the function removeItem:

Example:

localStorage.removeItem("token");

We can see that the token is no longer on the localStorage:

Delete all items

We can use the function clear to delete all existing items:

Example:

localStorage.clear();

Drawbacks of localStorage

As I showed localStorage it’s very easy to use and that can lead us to misuses:

Don't store too much data on it as it has just 5MB per domain.
All data is easily accessible for the user and any script running on the page and that makes it insecure. So don’t store sensitive information.
Don’t be tempted to use it as a substitute for a database.

javascript - New array method at()

Jose C — Mon, 15 Nov 2021 20:06:20 +0000

The new array method at() allows us to get access to array indexes using both positive as negative indexes.

This way we don't need to do maths anytime we want to access to the last array element.

const movies = [`Terminator 2`, `Rambo`, `Harry Potter`, `Star Wars`];

const oldWay = movies[movies.length - 1];
console.log(`The last movie is ${oldWay}`); // Star Wars

const newWay = movies.at(-1);
console.log(`The last movie is ${newWay}`); // Star Wars

It's not just for the last element:

console.log(`First movie ${movies.at(0)}`); // Terminator 2

If we pass an index that not exists it will return Undefined.

At this time the array method at() it's not compatible with all the browsers yet so for use it on production you will need a polyfill.

You can find more information at Mozilla MDN

React useState - Quick guide

Jose C — Mon, 08 Nov 2021 20:26:21 +0000

What is useState?

useState it's a react built in hook that allows you to create and handle component's state.

How it works

To use this hook we just pass the initial state value and the hook will return us an array with two elements:

The current state.
A function to update the component's state.

React components state can be anything we may need to be: a string, array, objects you name it. We can also declare as many states as we may need on each component.

To set the initial state we can set it directly or use a function result.

With examples everything is always more clear

Imagine we have a component that renders a button and a counter showing how many times the button has been clicked.

This component may be something like this:

const App = () => {
  let counter = 0;

  const clickHandler = () => {
    counter++;
    console.log(counter);
  };

  return (
    <div className="container">
      <h1>Total clicks: {counter}</h1>
      <button onClick={clickHandler}>Click!</button>
    </div>
  );
};

This component it's rendering a button and a counter and each time we click on the button prints on the console the counter value, however the Total clicks title it's stuck on the initial value that it's 0. Why? This is because variables only changes on the memory and has no sync with the view but we can solve this issue using the useState hook to update the counter:

First we need to import the useState:

import { useState } from "react";

const App = () => {
  // Initialize the components state on 0
  // useState hook returns the initial value (counter) and the function to update it (setCounter)
  const [counter, setCounter] = useState(0);

  const clickHandler = () => {
    console.log(counter);
    // state can never be modified, just overwritten
    setCounter((prevState) => prevState + 1);
  };

  return (
    <div className="container">
      {/* Now when clicking on the button the state gets updated and so does the counter */}
      <h1>Total clicks: {counter}</h1>
      <button onClick={clickHandler}>Click!</button>
    </div>
  );
};

When we are using useState the view shows the current value each time the state gets updated.

In react states can never be modified, must be overwritten.

In situations like the counter example where you need the previous state to set the new one you have to pass a function that receives the previous value and returns the new one. On the counter example the new state will be always the previous state + 1.

So variables on react are pointless? NOT AT ALL. I recommend you to use variable for anything that not needs to be rendered on the view as each time the states changes react re-renders the components to keep the view and the state up to date.