DEV Community: CheriseFoster

Mastering Asynchronous Actions in Redux with createAsyncThunk

CheriseFoster — Fri, 15 Dec 2023 00:15:51 +0000

In my previous blog post, I talked about Redux and broke down creating a slice to manage state in your applications. In this blog post, we are going to talk about another important tool in the Redux Toolkit called 'createAsyncThunk.'

What is 'createAsyncThunk'?

Other than being an obnoxious term to say and type, createAsyncThunk is a function from Redux's Toolkit to help manage asynchronous actions and data fetching. It's another tool to help reduce boilerplate code by generating action types for each stage of the async request (pending, fulfilled, rejected).

To implement createAsyncThunk into your slice, start by importing it the same way you import createSlice from the Redux Toolkit. The code below is an example from a project of mine where I created a houseSlice (each house has an address and information about the residents). Instead of fetching the data in my React component, it's in the slice:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

export const fetchHouses = createAsyncThunk('houses/fetchHouses', async () => {
    const response = await fetch('/api/houses');
    const data = await response.json();
    return data;
});

Breaking this down, we are exporting and defining our thunk for the house data. houses/fetchHouses is an action type string that uniquely identifies a specific action to be dispatched. Next, we define the logic for the async operation. Setting the response as a variable, this is where we include the fetch for the data. Similarly, we parse the JSON response body and return the data, which then becomes the "fulfilled" action payload.

If we were going to fetch the data in our component, it would look like this:

function Houses() {
  //add state
  const [houses, setHouses] = useState([]);

  useEffect(() => {
    fetch('/api/houses')
    .then(res) => res.json())
    .then((data) => {
     setHouses(data)
   });
  }, [])

This is a really simple fetch request, however, when you have other things you need to add in, like maybe a request to handle errors, it can take up a lot of space in your component.

Let's add reducers to our slice, but utilizing extraReducers:

const housesSlice = createSlice({
    name: 'houses',
    initialState: [],
    reducers: {},
    extraReducers: {
        [fetchHouses.pending]: (state) => {
            state.loading = true;
            state.error = null;
        },
        [fetchHouses.fulfilled]: (state, action) => {
            return action.payload;
        },
       [fetchHouses.rejected]: (state, action) => {
            state.loading = false; 
            state.error = action.error.message;
        },
    }
});

export default housesSlice.reducer;

extraReducers, why?

If you read my previous blog post, this code will look familiar to you. Quick run through of the first 3 lines: defining the slice, naming the slice, and setting the initial state of the slice. Normally, your reducers would go in the reducer object, and each reducer you want to use would need to be exported to be used in the components. Here, we are setting our reducers as an empty object and handling actions via extraReducers. ExtraReducers allow the handling of actions defined outside of the slice. It's useful for handling async operations like the actions created by createAsyncThunk, which are handled outside of the slice but need to be handled by the slice reducer.

If that doesn't make any sense, don't worry, you're not alone. There's a learning curve with Redux and it takes some time to get used to and understand.

The best description I've read to explain the difference between reducers and extraReducers is from a stack overflow question. Here's the answer:

The reducers property both creates an action creator function and responds to that action in the slice reducer. The extraReducers allows you to respond to an action in your slice reducer but does not create an action creator function.

Side note: "pending," "fulfilled," and "rejected" are action types that are built into the createAsyncThunk API, so use those action words and don't change them.

Code explained

In the extraReducers, we are handling the pending state of fetchHouses. The state loading is true because, well, it's loading. And state errors are null because the promise isn't fulfilled or rejected yet:
[fetchHouses.pending]: (state) => { state.loading = true; state.error = null; },

Next, we are handling the fulfilled state of fetchHouses by updating the state with the fetched data and setting loading to false since the request is complete:
[fetchHouses.fulfilled]: (state, action) => { state.data = action.payload; state.loading = false; },

Last, we are handling the rejected state of fetchHouses by setting loading to false and updating the state with an error message:
[fetchHouses.rejected]: (state, action) => { state.loading = false; state.error = action.error.message; },

Back in the React component

Now that our slice is done, it's time to add it into our component. This step is so simple you're going to think something is missing:

import { fetchHouses } from '../redux/housesSlice';

function HouseContainer() {
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(fetchHouses());
    }, [dispatch]);

That's it! When dispatch(fetchHouses()) is called, it initiates the asynchronous operations defined in the fetchHouses thunk. So if the operation is a success, fetchHouses.fulfilled is dispatched, and same with if it's rejected.

If you wanted to access each state, you could by using useSelector. For example:

function HouseContainer() {
    const loading = useSelector((state) => state.houses.loading);
    const error = useSelector((state) => state.houses.error);

    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error}</div>;

}

Conclusion

Using createAsyncThunk from Redux is a streamlined and more efficient way to handle asynchronous logic in your Redux applications. It can significantly reduce boilerplate code in your components, and provides a clear structure for async actions. Overall, it's cleaner and more maintainable.

Check out the Redux Toolkit docs at DOCS

Using Redux Toolkit for State Management in React

CheriseFoster — Wed, 08 Nov 2023 21:22:51 +0000

If you're building a large and complex application, it's no question that trying to manage state can get tricky and redundant. Insert: Redux. Redux acts as a state container for JavaScript applications so that state can be managed in separate files and accessed in your React components. However, Redux can be complicated, which is why Redux Toolkit was introduced to make managing state easier and simpler, reducing boilerplate code and hiding the difficult parts of Redux to ensure a good developer experience. If you've never used Redux before, there is a learning curve, but this blog is here to break down the basics.

But first, why would I use Redux?
A few reasons to use Redux would include: if you have large amounts of state in your application that are needed in various places, if your state is updated frequently over time, or if your application has a medium to large-sized codebase and might be worked on by many people.

Core Concepts

There are 3 core concepts in Redux:

-Store: This is what holds the state of your application. It allows access to state via getState(),and allows state to be updated via dispatch(action).
-Action: Actions describe what happened. They are the only way your app can interact with the store. Actions must have a "type" property that describes something that happened in the app.
-Reducers: Reducers tie the store and actions together by specifying how the app's state changes in response to actions sent to the store. In simpler terms, it handles the action and describes how to update state.

Redux Principles

The global state of your application is stored as an object inside a single store. You can maintain your application state in a single object to be managed by the Redux store.
To update the state of your application, you need to let Redux know about that with an action. The state object is not allowed to be updated directly, meaning it is immutable. But don't worry, Redux handles this for you by making a copy of the current state.
To specify how the state tree is updated based on actions, you write pure reducers (i.e. functions). Reducers take the previous state coupled with an action and return the next state. reducer = (previousState, action) => newState

Let's Get Coding

To get started, make sure you have redux toolkit installed:
npm install @reduxjs/toolkit react-redux

I created an application with a sign up/log in feature. In my src folder lies my components folder with all of my React components, and another folder I named redux. Each file under the redux folder contains state for various parts of my application. The first file to create in your redux folder should be the store.js file.

//store.js

import { configureStore } from "@reduxjs/toolkit";

export default configureStore({
    reducer: {

    }
})

The configureStore import creates the Redux store from Toolkit and is a way to pass in all of our reducers. When we make a Redux "slice", which is your reducer logic and actions for a single feature in your app (or your state for a particular feature), we will pass that into the store reducer.

To keep things simple and organized, I like to put the word "slice" into each of my slice file names. I created my authentication file under my redux folder and named it authSlice.js.

In authSlice.js:

Import createSlice from the Redux Toolkit library, this allows us to write our logic easier and with less boilerplate:

//authSlice.js

import { createSlice } from '@reduxjs/toolkit'

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    user: null,
    isAuthenticated: false,
    isLoading: false,
    error: null,
  },
  reducers: {

  }
});

const authSlice = createSlice({...}) creates a single slice of the Redux state.
In the next line, "name: 'auth'", we give a name to the slice which is referenced back in the store.js file as "auth: authReducer." The name can be whatever you want but keep it simple and easy.

We need to define an initial state for the slice, similar to defining your initial state when using state in a React component. If I were to just use state inside my component instead of Redux, it might look like this:

function AuthenticationComponent() {
  const [user, setUser] = useState(null);
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

As you can see, there is much less code using Redux! Let's move on to the reducer object:

//authSlice.js

reducers: {
    loginStart: (state) => {
      state.isLoading = true;
    },
    loginSuccess: (state, action) => {
      state.isLoading = false;
      state.isAuthenticated = true;
      state.user = action.payload;
      state.error = null;
    },
    loginFailure: (state, action) => {
      state.isLoading = false;
      state.error = action.payload;
    },
    logout: (state) => {
      state.isAuthenticated = false;
      state.user = null;
    },
  },
});

It's common practice in Redux to use Start (or often "Begin"), Success, and Failure (and sometimes Update) in the reducer object. It's not necessary, but it helps to handle the different states of async request within a reducer.

Actions and Payload

An action is a plain JS object that has a 'type' property which indicates the action that's being performed (logging in) and usually a 'payload' field which contains any data that should be used to update the state.

'loginStart': Takes the current state and marks the start of the login process by setting the state.isLoading to true.
'loginSuccess': Takes the current state and an action. It sets isLoading to false as the login attempt has finished, updates isAuthenticated to true indicating a successful login, sets user to the payload containing user data, and clears any errors by setting error to null.
'loginFailure': Sets isLoading to false since the login attempt has concluded, but an error occurred, and then sets error to the payload, which should contain information about what went wrong.
'logout': Sets isAuthenticated to false and logging the user out, and resets the user to null, clearing any stored user information.

The logout action doesn't require a payload since there's no need for additional data to perform these operations. The type of the action (which, thanks to Redux Toolkit, is automatically generated) is all the reducer needs to update the state accordingly.

Finally, we need to be able to use this code in other files, so we need to export it:

//authSlice.js

export const { 
  loginStart, 
  loginSuccess, 
  loginFailure, 
  logout,
} = authSlice.actions;
export default authSlice.reducer;

The export const {...} line includes all of our functions that return action objects when called. The reducer function authSlice.reducer is exported as the default export of the module. This reducer is what we would include in our store (store.js) configuration to handle state transitions based on the actions dispatched.

Make sure you import the reducer slice in your store.js file after you create it!

//store.js

import { configureStore } from "@reduxjs/toolkit";
import authReducer from './authSlice';

export default configureStore({
    reducer: {
        auth: authReducer
    }
})

You need a way to provide the Redux store to all of the components in your application that need to access the state or actions. To do this, use the "Provider" component from the react-redux library. "Provider" is a higher-order component that takes your Redux store as a prop and allows the rest of you application access to it.

In your index.js file:

//index.js

import App from "./components/App";
import store from "./redux/store";
import { Provider } from "react-redux";

const container = document.getElementById("root");
const root = createRoot(container);
root.render(
    <Router>
      <Provider store={store}>
        <App />
      </Provider>
    </Router>
  );

You can now successfully deploy your Redux state into whatever components of your application you need. In my Authentication component, I deployed the loginStart, loginSuccess, and loginFailure functions. Import the useDispatch hook provided by the react-redux library so you can dispatch actions to the store from within your React components:

I used formik in this component to handle the sign in form:

//AuthenticationForm Component

import { useDispatch, useSelector } from 'react-redux';
import { loginStart, loginSuccess, loginFailure } from "../redux/authSlice";

function AuthenticationForm() {
    const dispatch = useDispatch();

const signInFormik = useFormik({
        {code}...
        },
        validationSchema: signInSchema,
        onSubmit: (values, { ... }) => {
            dispatch(loginStart()); // Dispatch start action
            fetch('/api/login', {
                {code}...,
            }).then((res) => {
                  {code}...
                }
            }).then((user) => {
                dispatch(loginSuccess(user)); // Dispatch success action
                navigate('/home');
            }).catch((error) => {
                dispatch(loginFailure(error)); // Dispatch failure action
                setErrors({ ... });
            });
        }
    });

Conclusion

Redux Toolkit provides a simpler way to use Redux that helps you avoid boilerplate code and enforces best practices. By structuring your application's state management with slices and utilizing the other tools that Redux Toolkit offers, you can write more efficient, easier-to-understand code.

Our example of an auth slice is just the tip of the iceberg. There's much more you can do with Redux Toolkit, including creating more complex slices, handling side effects with thunks or sagas, and optimizing re-renders with memoized selectors.

//full code for authSlice.js

import { createSlice } from '@reduxjs/toolkit';

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    user: null,
    isAuthenticated: false,
    isLoading: false,
    updateError: null,
    error: null,
  },
  reducers: {
    loginStart: (state) => {
      state.isLoading = true;
    },
    loginSuccess: (state, action) => {
      state.isLoading = false;
      state.isAuthenticated = true;
      state.user = action.payload;
      state.error = null;
    },
    loginFailure: (state, action) => {
      state.isLoading = false;
      state.error = action.payload;
    },
    logout: (state) => {
      state.isAuthenticated = false;
      state.user = null;
    },
  },
});

export const { 
  loginStart, 
  loginSuccess, 
  loginFailure, 
  logout
} = authSlice.actions;
export default authSlice.reducer;

Resources: https://redux.js.org/
img src

Simplify Form Handling with Yup and Formik in React

CheriseFoster — Tue, 26 Sep 2023 16:19:49 +0000

Forms are a fundamental part of web applications, and handling them effectively can make or break the user experience. In React, managing forms can be complex, especially when you need to perform client-side validation and submit data to a server. Fortunately, libraries like Yup and Formik come to the rescue, making form management more straightforward, organized, and less error-prone. Let's explore why Yup and Formik are beneficial and walk through an example of how to use them to create a dynamic form in a React application.

But first....

What is Form Handling?

Form handling in web development encompasses several essential tasks that ensure a smooth user experience:

User Interaction: Capturing and processing user input through form elements like text fields, checkboxes, and dropdowns.

Form State Management: Managing the state of form components, including tracking user input and reflecting changes.

Validation: Ensuring the correctness of user-submitted data by validating it against predefined rules.

Error Handling: Providing feedback to users when validation fails or other errors occur during submission.

Submission: Sending user data to a server for further processing, often involving HTTP requests or backend interactions.

Feedback and Confirmation: Confirming to users that their data was received and processed successfully.

Resetting or Clearing: Offering options to reset or clear the form for a better user experience.

Form handling in React applications combines libraries like Yup and Formik to streamline and simplify these tasks, resulting in efficient and user-friendly forms.

Why Yup and Formik?

Let's understand why Yup and Formik are a great combination for handling forms in React:

1. Validation with Yup

Yup is a powerful and flexible JavaScript schema validation library. It allows you to define schemas for your form data and validate it easily. Some key benefits of using Yup for validation are:

Declarative Schema Definition: You can define your data schema in a declarative way using JavaScript objects, making it easy to understand and maintain.

Server and Client-Side Validation: Yup supports both server-side and client-side validation, ensuring consistent data validation across your application.

Custom Validation Rules: You can create custom validation rules and error messages, giving you full control over how your form data is validated.

2. Form Management with Formik

Formik is a library that simplifies the process of building and managing forms in React. It provides a set of utilities and components that streamline form creation and validation. Formik benefits include:

Form State Management: Formik handles the state of your form components, reducing boilerplate code for controlled components and form state management.

Validation Integration: Formik integrates seamlessly with validation libraries like Yup, making it easy to validate form data with error messages displayed to users.

Submission Handling: Formik simplifies form submission and error handling, making it easy to interact with APIs or perform other actions when the form is submitted.

To get started, make sure you install yup and Formik and correctly import them to be able to use in your code.

In my BookHub app, I created a form where a user can upload a book with a title, author, description, image, genre, and status of "read" or "want to read." This component is called "AddBookForm."
First, we define a Yup schema (formSchema) that specifies validation rules for the form fields. In this example, both the "title" and "author" fields are required.

const formSchema = yup.object().shape({
      title: yup.string().required("Must enter a title"),
      author: yup.string().required("Must enter an author"),
    })

Inside the AddBookForm function, we initialize Formik by calling useFormik. We provide initial form values, the validation schema, and an onSubmit function that handles form submission:

const formik = useFormik({
      initialValues: {
        title: '',
        author:'',
        description: '',
        image: '',
        genre: '',
        status: 'want-to-read'
      },
      validationSchema: formSchema,
      onSubmit: (values) => {
        fetch('/books', {
          method:"POST",
          headers: {
            "Content-Type" : "application/json",
          },
          body: JSON.stringify(values)
        }).then((res) => {
          if(res.ok) {
            res.json().then(book => {
              addBook(book)
              navigate(`/books/${book.id}`)
            })
          }
        })
      }
    })

Within the return statement, we create the form elements using standard HTML input elements for each field, including "title" and "author."
For each input field, we connect the value, name, and onChange properties to Formik's state and handlers, ensuring that the form state is controlled by Formik.

return (
      <div className="add-box">
        <h2>Add Book</h2>
        <form onSubmit={formik.handleSubmit}>
          <div className="user-box">
            <input
              type="text"
              name="title"
              value={formik.values.title}
              required
              onChange={formik.handleChange}
            />
            <label>Title</label>
          </div>
//Do this for each input field

With Yup handling schema validation and Formik managing the form state and submission, this dynamic form becomes more manageable and less error-prone. The separation of concerns between form state and validation logic leads to cleaner and more maintainable code.

When working with forms in React, especially complex ones, using libraries like Yup and Formik can significantly simplify the development process. Yup ensures data integrity and validation, while Formik handles form state and submission, resulting in a more organized and efficient codebase.

Creating a database and seeding data with SQLAlchemy

CheriseFoster — Mon, 17 Jul 2023 04:39:17 +0000

Databases are a critical component for storing and managing data in modern software development. A popular Python library called SQLAlchemy provides an Object-Relational Mapping (ORM) system that simplifies database interactions. In this blog post, we'll explore a code example I created that demonstrates how to create a database using SQLAlchemy, define tables and relationships, and seed it with sample data.

But first, what does it mean to "seed" data?

Seeding data simply means creating sample instances of data. It involves inserting predefined data into the database tables created.

Creating the database schema:

To begin, I drew an example on a piece of paper the tables I wanted to create and the columns I wanted to include, as well as defined what type of relationships I wanted my tables to have with each other. It's important to stay organized and have a plan before writing the code. I created a models.py file to build my tables, and a flights.db file so that I can view my tables as actual tables. From there, start by importing necessary modules and defining the database schema using SQLAlchemy's declarative_base() function.

My schema includes 3 tables: Flight, Passenger, and Reservations. Each table is its own entity, and relationships are established between tables with foreign keys.

In the code below, I established a Flight class and created a couple of columns I wanted to be on my table with the corresponding data type:

class Flight(Base):
    __tablename__ = 'flights'

    id = Column(Integer(), primary_key=True)
    airline = Column(String())
    flight_number = Column(Integer())
    origin = Column(String())
    destination = Column(String())

Next, I used Python's repr method on classes which defines how an object should be represented when its string representation is requested (such as when the object is printed).

def __repr__(self):
        return (
            f"ID: {self.id}, " \
           + f"Airline: {self.airline}, " \
           + f"Flight Number: {self.flight_number}, " \
           + f"Origin: {self.origin}, " \
           + f"Destination: {self.destination}, " \

After creating my Flight table, I created a Passenger and Reservation table using the same format and used foreign keys to create a one-to-many relationships between my desired tables. Make sure to import relationship and backref from sqlalchemy.orm to define table relations.

Seeding the data:

Now that the tables have been created, I created a separate file called seed.py to seed my database with sample data. Import create_engine and sessionmaker, as well as your tables from your models file. Import faker from Faker so that we can generate fake sample data. It doesn't hurt to import random too, just in case you need to generate some random numbers (for a flight number, per say). We are going to write some code to check if the current file is being executed as the main script:

if __name__ == "__main__":
    engine = create_engine("sqlite:///flights.db")
    Session = sessionmaker(bind=engine)
    session = Session()

    fake = Faker()

Let's break this down:

if __name__ == "__main__": --> __name__ holds the name of the current module. The line checks if the current module is the main module being executed.
engine = create_engine("sqlite:///flights.db"): --> This line of code is what creates an SQLAlchemy engine object that will connect to our flight.db database.
Session = sessionmaker(bind=engine) --> Here, a session object is created by invoking sessionmaker. This is how we interact with the database.
session = Session() --> We invoke sessionmaker by setting it to an object called session. Using session, we can execute queries and perform database operations. Similarly, fake = Faker() is invoked and set to an object to be used in our application as well.

We want to make sure that we write a session query to clear the database before each seeding, otherwise the database will keep the previous fake data we generated. This should be done for each table that was created:
session.query(Flight).delete()

For this specific table, I created a list of airlines that contains different airline names as strings, since there is not currently any way to generate fake airline names.

Create an empty list to append the information we are going to generate, I called mine flights. I want to be able to loop through all of my data, so let's use a for loop:

for _ in range(75):
        flight = Flight(
            airline = random.choice(list_of_airlines),
            flight_number = random.randint(100, 9999),
            origin = f"{fake.city()}",
            destination = f"{fake.city()}"

Since Flight was imported from models.py, I can create a new instance of the Flight class and set it to the "flight" variable. This will create a list of 75 instances of flight information, where it loops through the list of airlines I created, generate a random flight number between the set parameters (told you to import random just in case!), and, using Faker, create fake cities for the origin and destination.

To finish this code off, we need to push these changes to our database and create instances of data.

session.add(flight)
session.commit()
flights.append(flight)

The first line adds the "flight" object to the session, which is an instance of the "Flight" class, and stages the object for insertion into the database. The commit() method persists the changes made within the session. Finally, append the "flight" object to the "flights" list we created.

Navigate into the flights.db file, and you should be able to see your flights table with data inserted. I viewed my table using the SQLite Viewer extension on VS code:

React Component Props

CheriseFoster — Tue, 09 May 2023 22:06:26 +0000

React is a JavaScript library created and maintained by Meta used for building user interfaces. It is known for its component-based architecture, which allows developers to create reusable and modular code. Props are one of the most important tools to use in React components.

What are props?

In React, props are a way to pass data from a parent component to a child component. They allow components to be customized and constructed in different ways, without the need to rewrite the component's code.

For example:

Imagine you have a parent component called "Home" and a child component called "BlogList" that displays a list of blogs. The actual list of blogs is defined in the Home component in the form of an array of objects:

The BlogList component is the child component that maps over the array of blogs and displays each individual blog. We want to access the blog list array instead of having to copy the code from the Home component into the BlogList component:

We pass in props as an argument to BlogList and render the blogs array properties to a constant variable. By doing so, we can access the blogs array and use dot notation to access its key values.

To make sure that our new, mapped array renders, we need to return the child component, BlogList, in the parent component, Home, and pass the props as attributes:

Instead of creating a constant variable for blogs and setting it to props.blogs, another way to access props is to simply pass props as an argument and access the values using dot notation, such as props.blogs.value. While either will work, there is a way to refactor our code and make it shorter and simpler to read.

Destructuring

A more effective way to pass in props as an argument is to destructure the props object. Destructuring props takes the keys from the object and creates variables with the same names. The value associated with the key is saved in the corresponding variable so it can be directly accessed.

This also makes it easier to tell what props are being passed down to a component. In the above example, we know exactly what values are being accessed into the BlogList component instead of having to look for through the entire component for each prop reference.

In the Home component, the title attribute is set to a string and passed down as a prop to BlogList as a header for our blogs array:

Our blog, with a little CSS, would end up looking like this:

In the case that there is no value for a prop that is being passed as an argument, it is possible to set a default value for a prop. In the above example, if there was no title data, we could set the title to default to whatever we saw fit by simply assigning it a default value using an equal sign. (I.e. function BlogList({ title = "whatever" })).

Props can be used to customize components in a wide variety of ways. Here are some common examples:

Setting text, labels, and captions: Props can be used to set the text or label of a component.
Controlling behavior: Props can be used to control the behavior of a component. For example, you could pass a prop to a Modal component to specify whether it should be displayed or hidden.
Styling: Props can be used to apply styles to a component. For example, you could pass a prop to a Button component to specify its color or size.
Data: Props can be used to pass data to a component. As in the above example, you could pass an array of items to a List component to be rendered as a series of list items.

Conclusion

Props are an important part of React's component-based architecture, as they allow components to be composed and reused in different contexts. By passing different props to a component, you can create variations of that component that can be used in different parts of your application without having to rewrite the component's code.

InnerText vs. textContent vs. innerHTML : Which one should you use?

CheriseFoster — Sat, 01 Apr 2023 19:23:40 +0000

Whether you are a beginner or an advanced programmer, you have surely come across the innerText, textContent, and innerHTML properties. Each property can help you change and manipulate your code. But how do you know which to use when they all perform similar operations?

Let's break it down:

InnerText will show only "human-readable" text. It will not return any styling or hidden elements.

TextContent returns any and all node elements.

InnerHTML allows you to grab the text within the string of the HTML markup, including any styling or script tags.

If that still sounds like they are basically doing the same thing, you wouldn't be wrong! They do perform similarly but have subtle differences.

Let's start out with making a simple div HTML tag and adding some content:

We have some text and some styling included. The strong tag will bold the word "are", and the em tag will italicize "differences." We also included 3 spaces between the words "the" and "differences."
Now, let's create a variable in JavaScript so that we can grab the content of our div.

Using innerText:

Recall from above that innerText will return text that is "human-readable".

Result:

The output of getInfo is all of the text. Notice how neither of the tags or the spacing shows up when we call getInfo.value.

You should use innerText when you just need to grab THE TEXT without the styling tags or other formatting (the random spaces, for example). Think of innerText as only, you guessed it, the inner text.

Side note: innerText is not supported in Internet Explorer 9 or earlier versions. Because innerText is aware of CSS styling, it also can decrease performance by triggering a reflow. A reflow is when a browser reevaluates page elements when a document is re-rendered. An example of a reflow would be when a browser window is resized.

Using textContent

TextContent will grab all of the text and return any styling or script tags and any other formatting.

Result:

Notice how textContent grabbed all of the text and the styling, including the spaces. If you want to see what is in the element, then you should use textContent.

Side note: textContent will perform better than innerText because it does not trigger a reflow since it is not aware of CSS styling. Also, because its value is not parsed as HTML, textContent can help prevent malicious attacks.

Using innerHTML:

InnerHTML will return all of the text, styling tags included, as it is typed in the HTML document.

Result:

What that means is that innerHTML does not change anything, it just returns all of the text as it is in the HTML document.

Side note: using innerHTML should be few and far between because it can be a target for malicious code to be inputted. As long as you are using your own code and not code from any third party, you should be fine using innerHTML, however, try opting for textContent instead.

Why would I need to use any of these?

There are a multitude of reasons to use innerText, textContent, or sometimes innerHTML.
As you can see, innerText, textContent, and innerHTML all do very similar things. They all grab the text within the element, but there are slight differences. To recap, innerText will grab strictly the inner text, which means it will grab all of the text that is "normal" to humans. A styling tag such as strong is not normal text to humans, and it will not show up when using innerText. TextContent will also grab all of the text and whatever styling you put in there. The styling tags will not show as text, but will be executed. Finally, innerHTML will grab everything and return it as it is, styling tags and weird spaces and all. But beware of the safety implications when using innerHTML, and try to avoid using it.

header photo source: https://www.goodcore.co.uk/blog/coding-vs-programming/