DEV Community: Deborah Kurz

How to use Context in React

Deborah Kurz — Tue, 03 Sep 2024 02:05:49 +0000

Welcome back, friends! 

Today we're going over the basics of a React Hook called 'useContext'. 'useContext' is a powerful tool that goes a step beyond 'useState' to create a global-like State, and allows us to pass variables and functions down to children and grandchildren components without passing props directly. Using context will completely transform your coding skills!

But I’m getting ahead of myself. If you are not familiar with 'useState', jump over to my previous article first, then come back and prepare to be amazed! 
How To Use 'useState'

Now that you are up to speed on ‘useState’, let’s dive into ‘useContext’!

What is 'useContext'?

'useContext' is ideal for data that needs to be placed on a global scope (such as a username that will keep someone logged in throughout the entirety of the application's use), but it is not the end-all-be-all shortcut to passing props down to children components and should be used sparingly.

However, 'useContext' does allow us to pass data without passing props directly and is therefore extremely helpful when we do encounter data that needs to be accessed by several children components or be made available across the entirety of the application.

In order to get 'useContext' up and running we need to take two steps: first, we need to create a context object ('createContext'), then we need to access the value via 'useContext'.

Before we walk through this process, be aware that the following code examples have been simplified in order to give you a better idea of what 'useContext' is all about and how to use it. But, you should be aware that 'createContext' is often declared in a separate file of its own. In these examples, however, I am likening 'Parent.js' to a typical 'App.js' file (a component on the top of the component hierarchy). 'Parent.js' is where I have defined all my state variables and the functions that update those state variables. I chose to declare 'createContext' in my top-level component instead of creating its own file to simplify this explanation so you can better understand the core concepts of context.

With all that said, let’s get started!

1: Declaring 'createContext()'

The first thing we need to do is to declare and export a variable called 'Context' which we will use later in our child components [we're creating a variable now in order to make our code more simple and so we can eventually place a value (data) inside of it to be accessed later]:


export Context = React.createContext();

‘Context’ is a context object created by calling ‘createContext’. The context object holds a component called Provider which we will now be able to call and then pass the variables and functions that we want to keep at our 'global' level.

2: Calling 'Provider'

With our ‘Context’ variable ready to use let’s now jump down to our JSX in the return statement of our 'Parent' component. Here we will call ‘Context’ and wrap it in opening tags (angle brackets), and also call Provider like so:


return(
    <Context.Provider >
        // Other JSX 
    </Context.Provider>
);

In order to complete 'Context.Provider', we need to provide a value to ‘Provider’. To do this we will pass an object to 'value'. Inside the object, we will place any and all data that we want to access in child components:


return(
    <Context.Provider value ={{ example, setExample, handleExample }}>
        // Other JSX  
    </Context.Provider>
);

It is VERY IMPORTANT to note that we need to put ALL child components that will access context inside the 'Context.Provider' tags. For example:


return(
    <Context.Provider value ={{ example, setExample, handleExample }}>
        <Child />
        <Components />
        <Go />
        <Here />
    </Context.Provider>
);

Notice that we don’t need to pass any props directly to the child components so long as we put the props inside ‘value’.

Now that we have used 'createContext' and passed all our global-data to 'Context.Provider' we are ready to move on to the child components and use 'Context'.

3: Importing 'Context' (child component)

Let’s go to a child component, which (for the sake of this example) is housed in the file: 'Child.js'. As is life with coding: if you want to use something you need to import it. Let’s go ahead and get ‘Context’ from where we declared it in ‘Parent.js’ so we can use it in this child component (‘Child.js’):


import Context from ‘./Parent.js’;

Great! 'Context' is available for us to use now.

4: Importing 'useContext' (child component)

Now that we have access to ‘Context’ in the child component we need to import 'useContext' into the file so we can pass 'Context' to it (more on this shortly):


import React, { useContext } from ‘react’;
import Context from ‘./Parent.js’;

With 'useContext' and 'Context' now available to us, let's get working!

5: Using 'useContext' and 'Context' (child component)

First, we need to declare a variable for 'useContext'. We’ll do this inside the 'Child' component in a similar fashion to how we would declare 'useState':


import React, { useContext } from ‘react’;
import Context from ‘./Parent.js’;

function Child(){
    const { example, setExample } = useContext(Context)

    // The rest of our code

In this code we are using curly braces {} to denote destructuring assignment. That's a fancy way of saying we are able to call multiple variables and functions stored in Context, in one line of code. We are also passing ‘Context’ to 'useContext' so we can access the values defined in 'Context.Provider' (which we declared in ‘Parent.js’).  

6: Using context in your code (child component)

Believe it or not, you are all set! You can now use the context values in your code just like you would normally use State variables or functions. For example:

const exampleId = example.id;

setExample(newExample);

Brilliant! Isn't it?

Let’s Recap:

Congratulations! You now have all the tools to get started with 'createContext' and 'useContext'. You understand that 'useContext' allows you to create something of a ‘global state' that can pass variables and functions to components without passing props directly through child components.

We also delved into the six steps required to get context working in your applications. You are now ready to begin coding with 'createContext' and 'useContext', but in case you ever need a quick-start guide, this is for you: 

1. In your parent component, declare and export a variable called 'Context' using 'createContext':

export const Context = React.createContext();

2. In the parent component’s JSX, wrap all child components that need access to context in 'Context.Proivder' and pass any variables/functions in an object to 'value':

<Context.Provider value={{ example, setExample, handleExample }}>
    <ExampleChildComponent />
</Context.Provider>

3. In your child component, import 'useContext':

import React, { useContext } from ‘react’;

4. Also import ‘Context’ from the parent component:

import Context from “./Parent.js’;

5. Then use 'useContext' and pass it your ‘Context’ variable:

const { example, handleExample } = useContext(Context);

6. Finally, use the context you now have access to (in our examples above this would be 'example' and 'handleExample') however you need to in the child component.

Well done! Until next time, happy coding!

One last note for those of you who want to go a little deeper: here are the official documentation resources I also referenced while learning 'useContext' and writing this blog. 

Official Documentation:
https://react.dev/reference/react/createContext 

Legacy Official Documentation, still somewhat helpful for understanding 'useContext': 
https://legacy.reactjs.org/docs/context.html

How To Use Formik & Yup For Form Validations

Deborah Kurz — Tue, 16 Jul 2024 17:10:50 +0000

Welcome back, fellow coders!

Today we are going to be using the frontend library known as ‘Formik’ combined with a schema builder called “Yup” in a step-by-step framework to help you understand and implement validations on your React forms.

What are Formik and Yup?

When I first started learning Formik (and using Yup with it) I didn’t feel confident in it because I didn't understand what it was for. So, before we begin with the step-by-step process, let’s make sure we’re on the same page when it comes to understanding what both Formik and Yup are and why they are important.
Formik is a library used in React, and its official docs proudly state that it allows you to “Build forms in React, without the tears” (see ‘*Formik’ in the Reference section). What that statement really means is that Formik keeps track of values, validations, submissions, etc. in order to save you time and allow you to mentally keep track of more important details in your code (*Formik).
As I mentioned previously, Yup is a schema builder (and also a library) that allows you to define a schema and use it hand-in-hand with Formik to create validations (*Yup).

Okay, now let’s talk about the steps we can use in React to validate a form with Formik and Yup.

Formik and Yup Basics

Before we dive into a hands-on example, let’s detail out the steps we will need to take:

Import the necessary libraries to get Formik and Yup running.
Create a function for our Yup schema.
Inside the Formik function, define initial values, validation schema, and instructions for onSubmit.
Update our JSX to use Formik.

Let’s get started!

Formik and Yup Step-By-Step Guide

Recently I built a simple goals-tracker application and used Formik in the “Add Goal” form to validate the user intake and ensure that the value was a string between 1-20 characters long.
I’ll be using the “Add Goal” form as an example going forward.
To start with, this is what the form looked like in the User Interface:

Now that you know what the basic UI looks like, let’s transition to the code.
This is where we will start (without any Formik or Yup):

import React from "react";

function AddGoal({ handleGoal }){ 

    return(
        <div>
            <form onSubmit= >
                <input 
                    id="goal"
                    name="goal"
                    type="text" 
                    value=
                    placeholder = "Add A New Goal"
                    onChange=
                />
                <br></br>
                <button type="submit">Add My Goal</button>
                <br></br>
                <p></p>
                <br></br>
            </form>
        </div>
    )
};

export default AddGoal

Now let’s implement the steps we outlined above:

1. Import the necessary libraries to get Formik and Yup running.

Near the top of our page we will import the needed libraries:

import React from "react";
import { useFormik } from "formik";
import * as yup from "yup";

// Rest of code

2. Create a function for your Yup schema.

Now that Formik and Yup are available to us, we’re going to use Yup first to create our validations ("Add Goal" only has one user input, “goal”, but if you have more, you need to put a comma between them):

function AddGoal({ handleGoal }){
    const formschema = yup.object().shape({
        goal: yup.string().required("Please enter a goal with at least 1 character.").max(20)
    })

// Rest of code

In the code above we are declaring a variable “formschema” and using yup with its ‘object()’ and ‘shape()’ methods. These methods are basically saying “This is an object and its ‘shape’ will look like the following”.
On our "goal" key, which we will use in a POST request to a database later on, we are once again using Yup with the following methods to create validations for our user input: .string(), .required(), and .max().

Although our code technically isn’t working yet, let’s pretend it is for a moment and get a visual of what happens when we try to add a goal without entering anything into our input form:

Here we can see that the validation has triggered the ".required()" part of our formschema and thrown an error.

Okay, back to reality where we have NOT yet done everything needed yet to get these validation errors looking like the above photo… Let’s move on to the next step.

3. Inside the Formik function, we will define initial values, validation schema, and instructions for when onSubmit is triggered.

Next on our to-do list is to create a variable called ‘formik'. Inside this variable, we will call the ‘useFormik’ hook and define the initial value(s) for our form, call our formschema to define the schema inside the useFormik hook, make a post request with our new user value, and finally reset the form.

Let’s break this process up into pieces:
1) First, declare a variable and assign the useFormik hook to it:

function AddGoal({ handleGoal }){
    const formschema = yup.object().shape({
        goal: yup.string().required("Please enter a goal with at least 1 character.").max(20)
    })

    const formik = useFormik({})

    //Rest of code

2) Define initial values for the form:

function AddGoal({ handleGoal }){
    const formschema = yup.object().shape({
        goal: yup.string().required("Please enter a goal with at least 1 character.").max(20)
    })

    const formik = useFormik({
        initialValues: {
            goal: ""
        }, 
    })

    //Rest of code

(Make sure to include a comma at the end of your initialValues object).

3) Use formschema when adding the validationSchema key:

function AddGoal({ handleGoal }){
    const formschema = yup.object().shape({
        goal: yup.string().required("Please enter a goal with at least 1 character.").max(20)
    })

    const formik = useFormik({
        initialValues: {
            goal: ""
        },
        validationSchema: formschema,
    })

    // Rest of code

4) Give onSubmit a function with the “values” and “{ resetForm }” arguments:

function AddGoal({ handleGoal }){
    const formschema = yup.object().shape({
        goal: yup.string().required("Please enter a goal with at least 1 character.").max(20)
    })

    const formik = useFormik({
        initialValues: {
            goal: ""
        },
        validationSchema: formschema,
        onSubmit: (values, { resetForm })=>{}
    })

    // Rest of code

Inside onSubmit we will create our POST request (which we will not be going into detail on how to build in this article). However, in our second ".then()", we will call “resetForm(‘’)” in order to clear the form once a user has submitted it.

function AddGoal({ handleGoal }){
    const formschema = yup.object().shape({
        goal: yup.string().required("Please enter a goal with at least 1 character.").max(20)
    })

    const formik = useFormik({
        initialValues: {
            goal: ""
        },
        validationSchema: formschema,
        onSubmit: (values, { resetForm })=>{

            const configObj = {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(values)
            }
            const url = `http://localhost:5555/goals`
            fetch(url, configObj)
            .then(r=>r.json())
            .then(goalObj => {
                handleGoal(goalObj);
                resetForm("");
            })
        }
    })

//Rest of code

And there you have it! We have finished creating our formik function! That just leaves us one last thing to do:

4. Update the JSX to use Formik
(Our JSX before updating:)

// Previous code

return(
        <div>
            <form onSubmit= >
                <input 
                    id="goal"
                    name="goal"
                    type="text" 
                    value=
                    placeholder = "Add A New Goal"
                    onChange=
                />
                <br></br>
                <button type="submit">Add My Goal</button>
                <br></br>
                <p></p>
                <br></br>
            </form>
        </div>
    )
};

export default AddGoal

Let’s update the following items in our JSX: Update "onSubmit" with Formik:

// Previous code

return(
        <div>
          <form onSubmit={formik.handleSubmit}>

          // Rest of code

(Inside our input tag) update "value" with Formik:

// Previous code

return(
        <div>
          <form onSubmit={formik.handleSubmit}>
                <input 
                    id="goal"
                    name="goal"
                    type="text" 
                    value={formik.values.goal}
                    placeholder = "Add A New Goal"
                    onChange=
                />

          // Rest of code

(Still inside our input tag) update "onChange" with Formik:

// Previous code

return(
        <div>
          <form onSubmit={formik.handleSubmit}>
                <input 
                    id="goal"
                    name="goal"
                    type="text" 
                    value={formik.values.goal}
                    placeholder = "Add A New Goal"
                    onChange={formik.handleChange}
                />

          // Rest of code

Let’s circle back to when we demonstrated the validation errors earlier in this article and finish setting that up by creating styled errors in a
tag:

// Previous code

    return(
        <div>
            <form onSubmit={formik.handleSubmit}>
                <input 
                    id="goal"
                    name="goal"
                    type="text" 
                    value={formik.values.goal}
                    placeholder = "Add A New Goal"
                    onChange={formik.handleChange}
                />
                <br></br>
                <button type="submit">Add My Goal</button>
                <br></br>
                <p style={{ color: "red" }}>{formik.errors.goal}</p>
                <br></br>
            </form>
        </div>
    )
};

export default AddGoal

And that’s it! We've just walked through how to easily create Formik/Yup validations in code!

Recap:

In case you ever need a quick reference of Formik and Yup in the future, here are the steps you need to follow to get your forms validating properly:

1. Import the necessary libraries to get Formik and Yup running.

2. Create a function for your Yup schema.

3. Create a function that calls the useFormik hook. Inside the hook, define:
1) initialValues.
2) validationSchema
3) onSubmit [hand it a function with ‘values’ and { resetForm }. Make your POST request and call resetForm(“”) to clear input].

4. Update your JSX to use Formik:
1) In your form tag, add formik.handleSubmit to ‘onSubmit’.
2) In your input tag, add formik.values.(goal) to ‘value’.
3) In your input tag, add formik.handleChange to ‘onChange’.
4) Create a paragraph tag with styling for formik.errors.(goal).

Happy Coding!

Reference

*Formik: https://formik.org/

*Yup: https://www.npmjs.com/package/yup

Flatiron School's Phase-4 Formik and Form Validation Lesson was also used for reference by the author, though not quoted. For more information on Flatiron's School, please visit their website.

How To Write Basic List Comprehension In Python

Deborah Kurz — Thu, 09 May 2024 20:37:50 +0000

Welcome back, fellow coders!
Today we are going to simplify list comprehension so you can feel confident when writing them.

“List Comprehension” sounds like a massive term when you are first learning how to write the syntax (at least that's how I felt when I started learning) but don’t worry, soon you will be writing them like second nature!

What Is List Comprehension?

Put simply, list comprehension is a powerful tool in Python: It uses a for loop and returns a list object. And ALL this happens in one line. (You can think of list comprehension as the JavaScript equivalent of 'find' 'filter' AND 'map').

Wow... that does sound powerful!
Now let's learn how to write them!

List Comprehension Syntax

When I first started learning list comprehension (after working in JavaScript), I felt like the syntax was backwards and confusing. But if we break the syntax into smaller parts we find that it is quite user-friendly.

In fact, list comprehensions are actually easy to talk through in plain English. For example, the following list comprehension...:

greeting = [print("Hi") for person in my_school]

... would sound something like this in an English sentence:
"print 'Hi' for each person in my_school"

The above example is a trivial one but it shows the basic layout of our list comprehension syntax. Now let's get more in-depth and discuss each part of the syntax by building our own list comprehension.

Our finished example will look like this:

numbers = [1,2,3,4]

my_numbers = [(num*2) for num in numbers]

If we were to run this code in our console, we would expect each number to be multiplied by 2, and the following list to be returned when we call my_numbers:

[2, 4, 6, 8]

Let's dive in!

Because a list comprehension returns a list, we need to do something with that list (assign it to a variable or return it). In the above example, we assigned it to the variable my_numbers.

my_numbers =  #See the next step

Since we are returning a list, we place our list comprehension inside of square brackets.

my_numbers = []

The first thing we put inside the square brackets is what we want to return. In our example, we want our num multiplied by 2.

my_numbers = [(num*2)  ]

To finish, we write our for loop. In our example, this was for num in numbers where num represents the current item in the list, and numbers is what we are iterating through.

my_numbers = [(num*2) for num in numbers]

And there you have it! That's how simple list comprehensions are to write!
First, assign square brackets to a variable, or place them in a return statement...
Second, add what you want to be returned by the for loop...
And third, finish the list comprehension with the for loop itself.

Tips For Learning List Comprehension

Before we dive deeper into more complex list comprehensions, let's pause to discuss strategies for learning list comprehension.

When I was first learning list comprehension, there were two particular strategies that my professor encouraged me to hone:

1. While learning list comprehension, write out your `for` loops before writing your list comprehension.

While learning the formatting of list comprehension syntax, I found it extremely helpful to write out my for loops before I wrote my list comprehension.
For example, I might write:

for num in numbers:
    return num * 2

Then I would translate this into my list comprehension:

my_numbers = [(num*2) for num in numbers]

For simple examples like the one above, you might not need to write out your for loop beforehand, but once your code becomes more complicated you will see the value in doing so.

2. The last thing you add to a list comprehension is what you want the `for` loop to return.

When you are writing out your list comprehension, and are inside the square brackets, give yourself some space and write your for loop before writing what you want it to return. For example, first you would write:

my_numbers = [     for num in numbers]

And then finish off the list comprehension:

my_numbers = [(num*2) for num in numbers]

This will help you return the correct thing when you are working with a more complex list comprehension. It will also allow you to work through the problem in your head in English first. For example, you might say to yourself: "For num in numbers, (now add your return statement) multiply num by 2."

List Comprehensions And Conditional Statements

Hooray! Now you are comfortable with the basic syntax and have a few strategies to practice while learning how to write list comprehensions.
What now?
Before you move on to writing your own code, let's discuss one more important way of writing list comprehension: including conditionals.

Let's continue using our numbers example from above but this time let's make sure that we are only multiplying even numbers. How would we write this in our list comprehension?

By adding our conditional statement after the for loop.
If we were to write out our for loop before writing our list comprehension, our for loop and if statement might look something like this:

# for num in numbers:
#     if num % 2 == 0:
#        num * 2

We would then add our if statement to the list comprehension like so:

numbers = [1,2,3,4]

my_numbers = [(num*2) for num in numbers if num % 2 == 0]

Notice that the "if" comes after the for loop we learned about earlier.
Simply put: add the word if, then add your condition statement.

Example Of List Comprehension In A Project

Now you know the basics and are ready to start writing your own code, but before you do, let's look at a real-world example.

Recently I built a Python project with a CLI menu that stored a list of U.S. States and cities that I want to visit. I can add a State, save it, and then add cities to the State.
I can also list all the States to see what States have already been saved, and then choose one to view details about the cities saved in that State:

(This is my CLI menu. In it, I have chosen to view Hawaii (which I saved prior), and am currently viewing the cities (both are Maui) that are saved to that State of Hawaii. Next to each "city" is the wishlist activity I would like to do in that city/island).

The cities are stored in a database. In order to list all the cities, I need to "fetch" them from the database and make sure they match the State we are currently viewing.
Let's take a look under the hood to see how I accomplished this with list comprehension. In the following example I used list comprehension in city_list to iterate through the cities and find the ones that matched the State:

def list_cities(state):
    cities = City.get_all()
    city_list = [city for city in cities if city.state_id == state.id]
    separator()
    print(f'You are in {state.name}! (Or atleast in your {state.name} Menu...)\n')
    if len(city_list) > 0:
        print("Your cities include:")
        for i, city in enumerate(city_list, start=1):
            print(f'{i}. {city.name}: {city.attraction}')
    else:
        print("Please add a city!")

For explanation purposes, let's take this line by line:
I am currently in a user-facing method called list_cities() that is handed a state object which I will use in a few lines of code to verify that the cities belong to this State:

def list_cities(state):

In cities I am grabbing all my cities in the database using the get_all() method (which is in my City class in a different file, but its main purpose is to get all the cities in my database and turn them into objects that I can use):

    cities = City.get_all()

Now for the list comprehension in city_list where I use a for loop to iterate through cities and check if the foreign key in my city (city.state_id) is equivalent to the primary key in the state object (that was handed to list_cities()). (The state primary key is state.id):

    city_list = [city for city in cities if city.state_id == state.id]

This list comprehension will now return a list of cities that belong to a certain State! In my code I then went on to use that list to format a user-view list of cities in my CLI.

This has been a real-world example of list comprehension. And for those of you who are curious about the rest of my code, let's take a look at it:

    separator()    
    #A line used to help format the user-view.
    print(f'You are in {state.name}! (Or atleast in your {state.name} Menu...)\n')   
    #A print statement used to orient the user while we transition from our State menu to our City menu.
    if len(city_list) > 0:   
    #If our list has at least one city, perform the following actions:
        print("Your cities include:")
        #Since we should never show database id's directly to a user, we use enumerate() to place numbers before each city when we display the cities and their associated attractions.
        for i, city in enumerate(city_list, start=1):    
            print(f'{i}. {city.name}: {city.attraction}')
    else:    
    #If your list does not have any cities in it, print this:
        print("Please add a city!")

Conclusion

Once you become familiar with list comprehension you may find (just like I did) that they are actually kind of fun to write! But beyond how "fun" it is to write them, they are a powerful tool that will take your Python skills to the next level.
So the next time you write a list comprehension remember to break it into parts like we did in this article in order to keep its syntax simple in your head.

Happy coding!

(And a special thanks to my Python instructor Nancy!)

How to use State in React

Deborah Kurz — Wed, 13 Mar 2024 02:46:02 +0000

Welcome back, fellow coders!
Today we're going over the basics of a React Hook called useState. useState is a powerful tool that we can use to make the data more dynamic while building applications.
It might take you a little practice before this hook is second nature, but don't worry, in the long run it will make your job so much easier!

What is useState?

useState is a hook that returns an array when invoked. The array returns two powerful elements (in the examples in this article, we will use destructuring to assign those elements to variables): First up in the array is our State that will hold our dynamic data. We can update this variable with the second item in our array: a "setter" function (we invoke this function and it "sets" State to whatever we specify). And before we start using this array, we need to take a few steps:

1. Import {useState}:

As mentioned earlier, useState is a React Hook and before we can use it, we first need to import it into the component we wish to use it with. We do that like so:

import React, { useState } from “react”;

[Notice how useState is placed inside the curly braces (object destructuring)].

2. Declare State Variables Inside Your component:

Next, we need to declare our State variables inside the component we want to use it in.

function OurComponent(){
   const [variable, setVariable] = useState("initial value goes here");

//more code to come...
}

[We've declared our State variables, but in the example above, it's important for you to understand that we are using array destructuring, which, in short, is a way we can "separate" values from arrays into separate variables to use].

In the above code snippet, we can see how the array's first item is a variable named "variable":

   const [variable, setVariable] = useState("initial value goes here");

We will use this variable later in our code just like we would any other variable.

Next, we've declared our setter function which will allow us to "update" the State variable ("setVariable"):

   const [variable, setVariable] = useState("initial value goes here");

Finally, we've set an initial value for our State:

   const [variable, setVariable] = useState("initial value goes here");

(Intial values can be strings, objects, etc.)

3. Calling Our Stateful Variable:

As mentioned earlier, we can use the State variable like a normal variable. When we call it in our JSX, we simply can put curly braces around it like so:

<h1>{variable}<h1>

This will display the following h1 in our browser:

By following these simple steps, we have opened our application to many possibilities. Now let's look at an example of how State can benefit us.

useState Example:

Recently I was creating a simple application wherein a user could access a form that would allow them to add key information about a Bible verse, then save it for later reference in two other pages of the application.
By using State I was able to create a controlled form that allowed my application to "grab" the value from an input field and hold it in State.
Inside my Form component, these were my Stateful variables:

    const [testament, setTestament] = useState("");
    const [reference, setReference] = useState("");
    const [verse, setVerse] = useState("");
    const [url, setUrl] = useState("");

Now let's take a look at my input fields inside my "form" tag:

<form onSubmit={handleSubmit}>
      <input type="text" value={testament} placeholder={"Type 'Old' or 'New'"} onChange={(e)=> setTestament(e.target.value)} className="form"></input>
       <br></br>
       <input type="text" value={reference} placeholder={"Example: John 3:16"} onChange={(e)=> setReference(e.target.value)} className="form"></input>
       <br></br>
       <input type="text" value={verse} placeholder={"Example: For God so loved the world... "} onChange={(e)=> setVerse(e.target.value)} className="form"></input>
       <br></br>
       <input type="text" value={url} placeholder={"Paste the URL here"} onChange={(e)=> setUrl(e.target.value)} className="form"></input>
       <br></br>
       <button>Add My Verse!</button>
</form>

Let's take a closer look at the input fields:

 <input type="text" value={testament} placeholder={"Type 'Old' or 'New'"} onChange={(e)=> setTestament(e.target.value)} className="form"></input>

A few important things to note: first, the input's "value" is set to our State variable. Second, we have an "onChange" event handler that passes the callback function that calls the setter function "setTestament" and passes it "e.target.value" (which is whatever a user types into the input field). These two items, along with the declared State variable of "testament" that we defined earlier, allow us to dynamically update the "testament" variable so it reflects whatever a user has typed into the input form.

Since State is holding the value for "testament", we can later call the "testament" variable in our code.
For example, in my Bible Verse Application, I wanted to make a POST request, and thanks to State, I could now use the values stored in State to create a body for my POST request. Take a look at how I used the values stored in State to create my POST request's body. You'll notice that I named the State variables the same thing as the keys in my API objects, so some of the keys/value pairs look like they are repetitive. In reality, the key is the word on the left, and the State variable is being called as the value on the right.

        const configObj = {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(
                {
                    testament: testament,
//The API Object Keys and the Stateful variables are named the same thing. The Keys are on the left, and the Stateful variable is being called on the right.
                    reference: reference,
                    verse: verse,
                    url: url
                }
            )
        }

        fetch("http://localhost:3000/verses", configObj)
        .then(r=>r.json())
        .then(verseObj => {
            addVerse(verseObj);
        })
    }

Now that the information I stored in my State variables (which was retrieved from the input fields) is no longer needed in my component (because an Object has been added to the API with the information), I can clear the input fields by simply calling the setter functions and setting them to an empty string:

 fetch("http://localhost:3000/verses", configObj)
        .then(r=>r.json())
        .then(verseObj => {
            addVerse(verseObj);

//Now that I am sure my POST request was successful, I can clear the values stored in State so they will be ready for new user input:
            setTestament("");
            setReference("");
            setVerse("");
            setUrl("");
        })

This is just one example of how useful and time-saving useState can be while we code. However, useState does have an idiosyncrasy that we need to be aware of when we begin to use State.

useState Is Asynchronous:

When using State, we need to be aware that whenever our setter function is called, the component will re-render. Take a moment to think about what you just read.
useState's ability to re-render the component is a good thing: it allows us to update the DOM without making the user manually refresh the page to show an updated DOM.
You'll want to remember that updating State is asynchronous. This means that React will internally keep track of the new value when a setter function is called, but it won’t update the State "variable" until after the component re-renders. Because of asynchrony, the rest of the component will finish running before the re-rendering occurs.
Okay, let's take a look at an example to make sure we understand: If we have a State variable like in the example below, and we call the setter functions, take a look at when the console.logs print.

Our code:

import React, {useState} from "react";

function OurComponent (){
    const [variable, setVariable] = useState("")

    console.log("1: ", variable)

    function handleChange(e){
        setVariable(e)
        console.log("2: ", variable)
    }

    console.log("3: ", variable)

    return(
        <div>
            <input type="text" value={variable} onChange={e => handleChange(e.target.value)}></input>
            <h3>{variable}</h3>
        </div>
    )
}

export default OurComponent;

Our initial console.logs:
Our next set of console.logs after typing in 1 letter:
The following set of console.logs after typing in our 2nd letter:

Let's take a closer look at these console.logs to truly understand the asynchronous behavior of State:

In our first console.logs we did not see our "2" console.log. This was expected, as handleChange had not yet been called, so let's move on.
Our "2" console.log was the first to be called, but even though we had updated State in the prior line in our code, the change was not reflected in the "2" console.log. What we learned from our first console.logs was that "1" and "3" are called whenever the page re-renders and we do indeed see them with the update value after re-rendering.
So what happens to our "2" console.log if we type another character in our input field? We see that "2" is updated with the value from our previous entry... but "1" and "3" have re-rendered once again and are displaying the correct value that is stored in our State "variable".

Let's Recap:

Congratulations! You now have all the tools to get started in useState. In this article, we discussed a little about why we like useState and then went over the necessary code to get useState working in your application. We also delved into an example of a controlled form that utilized State to keep track of input fields and send a POST request to an API. Finally, we covered one of useState’s unique attributes that can cause issues if we aren’t careful, so we'll remember that State is asynchronous.

You are all ready to begin coding with useState, but in case you need a cheat sheet to get started:

Import the useState hook:

import React, { useState } from “react”;

Declare the State variables inside the Component:

function OurComponent(){
   const [variable, setVariable] = useState("initial value goes here");

//The rest of your code goes here...
}

Call the setter function when you want to update the State variable:

setVariable("new value goes here");

Remember that State is asynchronous.

find(), filter(), and map() Explained As Party Games

Deborah Kurz — Tue, 07 Nov 2023 16:59:16 +0000

Hello fellow coders! When beginning my journey of learning array iteration methods (including find(), filter(), and map()), I struggled to keep track of which method did what, and how to use each method. Can you relate? Well, today we’re going to turn these methods into analogies that you can remember! First I’ll tell you a story and then we’ll relate it to the method. I’ll include some simple code examples, so open Replit or a coding project and follow along!

What are methods and why are they important?

The word “method” was hard for me to understand at first, but we can think of “methods” as “actions” or “steps”.
The methods we’re talking about today can seem hard to grasp at first, so let’s orient ourselves with why we want to learn them.
As software engineers, we want to write code efficiently and these methods help us reach that goal. Each of these methods is important because they provide us with cleaner code that is easier to read. Also, we often can write fewer lines of code when we use these methods.

Before we get started with the examples below, it's important to remember that none of these methods are Destructive (they WON'T mutate the original array). Please keep that in mind as you read through the stories below because the stories aren't perfect metaphors.

Now let's learn these methods!

find() Method

SURPRISE! It’s your birthday and your best friend organized a surprise party! You’ve spent the last couple of hours eating cake, opening presents, and socializing, but now it’s time to play party games! There are some fun party games planned and the first one is a scavenger hunt!

This is going to be a quick game because everyone only has 1 item to find: a red balloon. You are going to have to move quickly and grab the FIRST red balloon you see (or someone else will find a red balloon first!). The referee says “Go!”, and everyone scurries away. In your mind, you are ONLY looking for red balloons and huzzah! You see one! You grab it and run back to the referee. You WON! As everyone congratulates you, you look around and realize that the room is full of red balloons, but you only SAW the first red balloon you come across. All of a sudden, you realize that you have just used the find() method without realizing it:
We can imagine that all the balloons in the area where you looked could be translated into an array like this:

const balloonArray = [
  {color: 'blue', condition: 'inflated', inTrash: 'no', number: 1},
  {color: 'red', condition: 'inflated', inTrash: 'no', number: 2},
  {color: 'yellow', condition: 'inflated', inTrash: 'no', number: 3},
  {color: 'green', condition: 'inflated', inTrash: 'no', number: 4},
  {color: 'red', condition: 'inflated', inTrash: 'no', number: 5},
  {color: 'blue', condition: 'inflated', inTrash: 'no', number: 6},
  {color: 'yellow', condition: 'inflated', inTrash: 'no', number: 7},
  {color: 'blue', condition: 'inflated', inTrash: 'no', number: 8},
  {color: 'red', condition: 'inflated', inTrash: 'no', number: 9},
  {color: 'green', condition: 'inflated', inTrash: 'no', number: 10}
];

And you were acting like the find() method, looking for the FIRST red balloon you came across:

let findRedBalloon = balloonArray.find(balloonObject => {
  if(balloonObject.color === "red"){
    return balloonObject;
  };
});

console.log(findRedBalloon);

Let's look at what our console.log() returned in our browser's console:

It is easy to see from our console.log() that the find() method used in findRedBalloon is ONLY returning the 1st red balloon in our array. findRedBalloon returned the red balloon with the key-value pair of "number: 2". We can verify that this is indeed the first red balloon in the array by looking at our balloonArray.

Let's break down the find() method more in-depth by coding together

First, we'll declare a variable, then call the find() method on the balloonArray (the array holding all the balloons):

let findRedBalloon = balloonArray.find();

Inside our find() method we need a callback function, and we'll write one here as an arrow function so it is even cleaner and easier to read. While we're at it, we'll also include a parameter named "balloonObject" so it reminds us that we are going to be looking through the balloonArray at each individual balloon object inside it:

let findRedBalloon = balloonArray.find(balloonObject => {
//our next code goes here
});

Our code is looking great, but now we need to define what we are doing with the balloonObject. Since we are using find() to find the 1st red balloon we come across, let's use an “if” statement to find a red balloon and return the entire balloonObject. In order to do this, we'll use dot notation to access the "color" value stored inside our balloonObject:

let findRedBalloon = balloonArray.find(balloonObject => {
  if(balloonObject.color === "red"){
    return balloonObject;
  };
});

And now you understand the find() method! It's easy to imagine that instead of just returning the balloonObject like we did above, you could run the object through a function, or "do" something more complicated with it at this point.

filter() Method

Back at your birthday party, people have barely stopped congratulating you on your win when the referee announces the next game. Each competitor starts with a dumpster full of balloons. The competitor will pull a balloon out of the dumpster. If the balloon is red, they will run across the room and place it in a basket. If it isn't red, the competitor will throw it on the floor out of the way.

As soon as the referee says "Go!", you start quickly working through the dumpster, evaluating one balloon at a time. If it's red, you get it to the basket as quickly as possible. If it's not red, you throw it out of your way. Since you're so focused, you get done before anyone else! As you wait by your basket of red balloons while your friends finish sorting through their balloons, you suddenly realize that you have just acted like the filter() method, looking for all the red balloons you came across in your dumpster (array):

let filterRedBalloons = balloonArray.filter(balloonObject => {
  if(balloonObject.color === "red"){
    return balloonObject;
  };
});

console.log(filterRedBalloons);

Let's look at what our console.log() returned in our browser's console:

If we check our balloonArray, we can verify that filterRedBalloons did indeed return all the red balloons in the array.

Let's break down the filter() method more in-depth by coding together

To make this example easier to understand, we’ll assume that the balloons in your dumpster were the same as the balloonArray we used in the previous example.

The process you went through to sort balloons would be the find() method: go through the ENTIRE array and find ALL the red balloons. Don't stop until you have sorted all the balloons.

In code, we would first declare a variable, then call the filter() method on the balloonArray like so:

let filterRedBalloons = balloonArray.filter();

Inside our filter() method we need a callback function, and we'll once again write ours as an arrow function. While we're at it, we'll make a parameter named "balloonObject":

let filterRedBalloons = balloonArray.filter(balloonObject => {
//our next code goes here
});

Just like we did in the find() example, we're now going to write code to do something with the balloonObject. In our example we want to collect all the red balloons, so we'll use an “if” statement and dot notation to access the color value stored inside our balloonObject and compare it to "red":

let filterRedBalloons = balloonArray.filter(balloonObject => {
  if(balloonObject.color === "red"){
    return balloonObject;
  };
});

At this point, instead of just returning balloonObject, we could do something with the balloonObject. But for this example, let's end here and move on to learn about map()!

map() Method

It’s time for the final game of the party, and in hindsight, you realize the party planners were using this game to clean up the party...
The game goes like this: Everyone has to pick up 10 balloons off the floor (it doesn't matter what color, so long as you pick up 10). To win the game, you will need to pop all the balloons as quickly as possible. Then you'll need to pick up all the popped pieces and throw them into the trashcan. Whoever pops 10 balloons first wins and gets to take home all the leftover cupcakes as their prize!

You get two teammates for this challenge, and after a quick huddle, your team decides that you will be in charge of grabbing balloons off the floor. Once you have one you'll hand it to your 1st teammate. They'll be in charge of popping the balloon, and your 2nd teammate will pick up the balloon pieces and throw them in the trash.

The referee says "Go!" and you begin to pick balloons off the floor and hand them to your 1st teammate one at a time. When you hand the balloon to your 1st teammate, she pops it and your 2nd teammate quickly picks up the pieces and runs over to the trashcan to throw them away. You’ve found an efficient system that’s better than your teammates, and before you know it you’ve popped 10 balloons! Your team won! Everyone congratulates you for being undefeated at party games, and while you munch on another cupcake, you start to realize that you and your teammates just did the map() method. You had 10 balloons (your array), that you sorted through individually (your balloonObject). You handed each balloonObject off to your 1st teammate, who, in code, would be a function. That function ran, and then the 2nd teammate (also a function) was passed the balloonObject. Your code would look something like this:

let mapBalloons = balloonArray.map(balloonObject => {
  popBalloon(balloonObject);
});

function popBalloon(balloonObject){
  balloonObject.condition = "popped";
  throwBalloonAway(balloonObject);
};

function throwBalloonAway(balloonObject){
  balloonObject.inTrash = "yes";
  console.log(balloonObject);
};

Let's look at what our console.log() returned in our browser's console:

Our console.log() shows us that our "condition" and "inTrash" values have changed in each object (remember, this is a non-destructive method, so the original array has NOT changed).

Let's break down the map() method more in-depth by coding together

First, we'll declare a variable, then call the map() method on the balloonArray:

let mapBalloons = balloonArray.map();

Our map() method needs a callback function, so let's provide one in the form of an arrow function, and add a parameter of "balloonObject":

let mapBalloons = balloonArray.map(balloonObject => {
//our next code goes here
});

Next we're going to call a function that map() will pass each ballonObject individually into:

let mapBalloons = balloonArray.map(balloonObject => {
  popBalloon(balloonObject);
});

And we'll assume we've already written these functions which each change a value inside the object. The important thing to realize here is that map() is passing each individual balloonObject into these functions. We didn't have to write out a for loop or anything!

function popBalloon(balloonObject){
  balloonObject.condition = "popped";
  throwBalloonAway(balloonObject);
};

function throwBalloonAway(balloonObject){
  balloonObject.inTrash = "yes";
};

(These functions are pretty simple, but you can imagine that you could do some pretty complex things with your own functions).

Let's review

Find(), filter(), and map() can be daunting when you are first introduced to them, but I hope these "party game" examples have shown you that at their core they aren't very complicated and can be very helpful.

So, the next time you use one of these methods, think back to the party games we talked about here and reference the notes below if you need to!

find()

Find the first red balloon

filter()

Collect all the red balloons

map()

Pop all the balloons

Thanks for reading!

If_Else If Statements: The Quick Guide For Beginners

Deborah Kurz — Thu, 10 Aug 2023 15:00:00 +0000

(See The Header Image For How An If_Else If Statement Is Basically Written In A Function)

JavaScript likes to "solve" If_Else If Statements like flipping through a catalog...

...in search of something to buy - "If you don't want thing1, move on to thing2, and if you don't want thing2, move on to thing3, etc. Finally, if nothing else works, just get the basic model". Let's explore this a little more:

Our function starts out by checking the condition with the block of code to the right of the "if". This is our starting place, so it get's the special "if" name. If the condition is true (it matches exactly with the thing we've defined to the right of the ===), the function will return something from this block of code, then exit the function.

BUT, if the condition is FALSE, (it DOESN'T match exactly with the thing we've defined to the right of the ===), the function will move on and run the "else if" part of the code. If the condition is true (it matches exactly with the thing we've defined to the right of the ===), the function will return something from that block of code, then exit the function.

We can have multiple "else if" parts of the code - one for each option we want - and if the previous "else if" statement returns false, the next "else if" statements will be checked. This will continue until either 1)one of the "else if" statements returns true, or 2)there are no more "else if" statements left, in which case we move on to the last part of our code:

If nothing has returned true by the time we reach "else" (notice, this is the last part of the code and is NOT written "else if"), then the "else" part of the code will run and return something from that block of code.

It is important to remember that SOMETHING will be run: we have many options for what to run if something matches our "if" or "else if" parts of the code... but if nothing matches these parts, the "else" part of the code WILL run.

You can remember when to use If_Else If Statements like this:

If not Option1 or Option2 or Option3 (etc.), do the Final Option.

If_Else Statements: The Quick Guide For Beginners

Deborah Kurz — Thu, 03 Aug 2023 14:00:00 +0000

(See The Header Image For How An If_Else Statement Is Basically Written In A Function)

JavaScript likes to "solve" If_Else Statements like a simple "do thing 1 OR do thing 2" scenario:

Our function starts out by checking the condition with the block of code to the right of the "if". If the condition is true (it matches exactly with the thing we've defined to the right of the ===), the function will return something from this block of code, then exit the function.

BUT, if the condition is FALSE, (it DOESN'T match exactly with the thing we've defined to the right of the ===), the function will move on and run the ELSE part of the code.

We're essentially saying: Check the "if" part of the code, and if it matches, run the "if" part of the code. But if it doesn't match, run the "else" part of the code.

You can remember when to use If Statements like this:

If Thing 1 is TRUE, do Thing 1. If Thing 1 is FALSE, do Thing 2.

If Statements: The Quick Guide For Beginners

Deborah Kurz — Fri, 28 Jul 2023 01:07:55 +0000

(See The Header Image For How An If Statement Is Basically Written In A Function)

JavaScript likes to "solve" If Statements like a simple true or false scenario:

If the condition we give to a function is true (it matches exactly with the thing we've defined to the right of the ===), the function will return something.

If the condition we give to a function is false (it DOESN'T match exactly with the thing we've defined to the right of the ===), the function does NOT return anything.

You can remember when to use If Statements like this:

If TRUE, do something. If FALSE, do nothing. That's it.

The Quick Guide To Writing A Function For Beginners

Deborah Kurz — Tue, 27 Jun 2023 20:15:53 +0000

As beginners to the world of JavaScript and Software Engineering, Functions are often one of the first things we learn how to write.
Below, we will discuss the basic anatomy of a function (the bare bones that act as a framework for building more complex functions).

As a refresher: Functions are something we can make once, then call on many times later in our code. This means we need to build both the function to act as a "container" and put the action we want repeated inside of it.

First let's look at a function's most basic format, then discuss what is on each line:

function nameOfFunction (valuesGoHere) {
return (values, strings, or interpolation);
}

Writing the first line of our function:
First we use the function keyword...
Next we choose a descriptive name for our function...
We'll follow this with () parenthesis. The values we put inside the parenthesis are determined by what kind of function we are making, and what we want our function to do.
We'll end this line with a { opening curly bracket.

Writing the "middle" line(s) of our function:
This is where we will put the code that will be used when we call the function later.
First, we will either use the keyword console.log(); (for our own developer use) or return(); (to have the function return something).
Inside the () parenthesis, we will now put a string or value or even use interpolation.

Writing the last line of our function:
Lastly, to fully contain the function, we must end with a } closing curly bracket.

This framework is the basic building block on which more complex functions can be built.

DEV Community: Deborah Kurz

How to use Context in React

What is 'useContext'?

With all that said, let’s get started!

1: Declaring 'createContext()'

2: Calling 'Provider'

3: Importing 'Context' (child component)

4: Importing 'useContext' (child component)

5: Using 'useContext' and 'Context' (child component)

6: Using context in your code (child component)

Let’s Recap:

Well done! Until next time, happy coding!

How To Use Formik & Yup For Form Validations

What are Formik and Yup?

Formik and Yup Basics

Formik and Yup Step-By-Step Guide

1. Import the necessary libraries to get Formik and Yup running.

2. Create a function for your Yup schema.

3. Inside the Formik function, we will define initial values, validation schema, and instructions for when onSubmit is triggered.

Recap:

Happy Coding!

Reference

How To Write Basic List Comprehension In Python

What Is List Comprehension?

List Comprehension Syntax

Tips For Learning List Comprehension

1. While learning list comprehension, write out your for loops before writing your list comprehension.

2. The last thing you add to a list comprehension is what you want the for loop to return.

List Comprehensions And Conditional Statements

Example Of List Comprehension In A Project

Conclusion

How to use State in React

What is useState?

1. Import {useState}:

2. Declare State Variables Inside Your component:

3. Calling Our Stateful Variable:

useState Example:

useState Is Asynchronous:

Let's Recap:

Import the useState hook:

Declare the State variables inside the Component:

Call the setter function when you want to update the State variable:

Remember that State is asynchronous.

find(), filter(), and map() Explained As Party Games

What are methods and why are they important?

find() Method

Let's break down the find() method more in-depth by coding together

filter() Method

Let's break down the filter() method more in-depth by coding together

map() Method

Let's break down the map() method more in-depth by coding together

Let's review

find()

filter()

map()

If_Else If Statements: The Quick Guide For Beginners

JavaScript likes to "solve" If_Else If Statements like flipping through a catalog...

You can remember when to use If_Else If Statements like this:

If_Else Statements: The Quick Guide For Beginners

JavaScript likes to "solve" If_Else Statements like a simple "do thing 1 OR do thing 2" scenario:

You can remember when to use If Statements like this:

If Statements: The Quick Guide For Beginners

JavaScript likes to "solve" If Statements like a simple true or false scenario:

You can remember when to use If Statements like this:

The Quick Guide To Writing A Function For Beginners

1. While learning list comprehension, write out your `for` loops before writing your list comprehension.

2. The last thing you add to a list comprehension is what you want the `for` loop to return.