DEV Community: Chris

Using socketio in a full stack application

Chris — Sun, 10 Mar 2024 21:49:29 +0000

Introduction

socketio is an event driven library that allows for real-time, bi-directional communication between server and client. It is mostly used for chat applications but for my project, I used it to replace the HTTP server client communication.

For my phase 5 project blog, I decided to share how to implement socketio with my full stack application

My goal with using socketio was to replace the communication between the frontend and backend but keep as much of my project logic intact and the same. This means replacing all fetch requests (GET, POST, PATCH, and DELETE) and API routes but still keep how my project processes that data on the frontend and backend.

Setting up `socketio`

Backend

Flask was a requirement for my phase 5 project so I used the 'flask-socketio' package. I am using a python virtual shell to install my packages, so I ran the following command in terminal: pyenv install flask-socketio

On the server side, you instantiate your flask app and configure it as you normally do, but with flask-socketio you need to do the following additional things:

You need to edit your CORS and set resources={r"/*":{"origins":"*"}}
You need to insatiate a socketio object, pass your app into it, and set the CORS settings
Instead of running app.run(port=5555, debug=True) you instead run socketio.run(app, debug=True, port=5555)

# config file
from flask import Flask
from flask_socketio import SocketIO
from flask_cors import CORS


# Instantiate app
app = Flask(__name__)

# Instantiate CORS
CORS(app, resources={r"/*":{"origins":"*"}})

socketio = SocketIO(app, cors_allowed_origins="*")


# app file
if __name__ == '__main__':
    socketio.run(app, debug=True, port=5555)

Now you have a socketio server running on the backend

Frontend

Let’s set up the frontend. Install the package, npm install socket.io-client

Now to establish your frontend connection, you instantiate a socketio object

const socket = io("localhost:5555", {
transports: ["websocket"],
            cors: { origin: "*",},
}

There are some settings to pass:

The first is the domain to connect to. We're passing our local host backend address here
Second, we're passing a dictionary of settings
socketio uses both websockets and http connections, where the latter is a backup. to ensure my project uses websockets, I configured it to only establish that connection. this is optional / dependent on what your project goals are
cors: setting the cors settings

Note that with each instance of the socket object, a new connection is established. I wanted to have one connection so I created this socket in the App component as a global variable. I then used React context to pass this object directly to child components that receive and send data.

Start your react app and the socketio connection is now establish.

Testing Your Connection

To ensure and test that your connection works, lets include the following

On the backend app.py file:

@socketio.on("connect")
def handle_connect():
    print("Client connected!")
    emit( "connected", {"data": f"id: {request.sid} is connected"})

socketio for python and flask uses decorators to register events.

One special event is called "connect". Calling socketio.on("connect") event decorator wrapped around a function will call that function every time a first connection is established.

Here, every time we connect on the backend, we print out to the terminal "client connected".

Next we emit data back.

emit is a socketio function that sends data to the name of the room you are sending that data to. The next argument is the data you're sending. socketio JSONIFY your data automatically so you do not need to use that function.

So here, we are sending data to the frontend to a room called "connected". Please note, do not use special key word events such as connect or disconnect as it will cause bugs to occur.

On the frontend,

    socket.on("connected", (data)=>{
        console.log(data)
      })

The socket.on is similar to the backend where the first argument is the name of the room. However, this uses a second argument as a callback function, where the data is passed and you can perform whichever action you want. In our case, we receive the socket id and it gets printed out in the console log. This will indicate to us that the connection was successfully established

Converting my application

In the App component, a fetch get request is performed within the useEffect hook to get the data from the backend. I replaced these fetch requests as follows:

original:

 fetch("/workout_plans")
      .then( r => r.json())
      .then( d => setPlans(d))

    fetch("/schedules")
      .then( r => r.json())
      .then( d => setSchClasses(d))

    fetch("/coaches")
      .then( r => r.json())
      .then( d => setCoaches(d))

    fetch("/exercise_moves")
      .then( r => r.json())
      .then( d => setMoves(d))

to:
socket.on("coaches", data => setCoaches(data))
socket.on("schedules", data => setSchClasses(data))
socket.on("workout_plans", data => setPlans(data))
socket.on("exercise_moves", data => setMoves(data))

socketio is listening to these four rooms for data.

On the backend. I created a function that pulls all of my data from the database. Note, the objects from my DB needs to be serialized. I used flask-marshamallow and marshamallow to serialize these DB objects and include or exclude specific relationships and fields. if your data from the backend doesn't have complex relationships that require some type of serialization, you may pass them directly into socketio.

The data is then emitted to the rooms I specified:

def refresh_all_data():
    coaches = Coach.query.all()
    workout_plans = Workout_Plan.query.all()
    exercise_moves = Exercise_Move.query.all()
    schedules = Schedule.query.all()

    emit("coaches", coaches_schema.dump(coaches))
    emit("workout_plans", workout_plans_schema.dump(workout_plans))
    emit("exercise_moves", exercise_moves_schema.dump(exercise_moves))
    emit("schedules", schedules_schema.dump(schedules))

Thus, when the frontend and backend first connect, within the on "connect" event, I call on this refresh_all_data() function. All of the records are pulled, the data is serialized, and it is then emitted to these rooms.

On the frontend, these rooms are being listened to, and when the data is received, the object data is passed to the state variables established, updating the frontend's various views. Since these rooms are within the useEffect hook, React re-renders again but not infinitely. Everything else in the App component stays the same.

Next, all components with the suffix Form utilize fetch requests for patching, or posting data. Also within the ClassScheduleDetail component, there are fetching delete requests. These components logic are dependent on acknowledgements, and socketio allows you to provide this when data is emitted and received.

Utilizing CoachForm as an example, previously when a form data is submitted, there were two routes: if the form was submitting a new object or updating an existing object. Within each of those two routes, if the response was ok, to perform various actions involving refreshing the component and setting the page to show the object or to display the error from the backend as to why it didn't work.

Previously:

  function submitData(values){

    if (values.id === ""){
      fetch("/coaches", {
        method: "POST",
        headers: {"Content-Type" : "application/json"},
        body: JSON.stringify(values)
      })
      .then( r => {
        if (r.ok){
          r.json().then(data => {
            setRefresh(!refresh)
            history.push(`/coaches/${data.id}`)
            setFormData(data)
            setApiError({})
          })
        } else {
          r.json().then( err => {
            setApiError(err)
          })
        }
      })
    } else {
      fetch(`${values.id}`, {
        method : "PATCH",
        headers : { "Content-Type" : "application/json"},
        body : JSON.stringify(values)
      })
      .then( r => {
        if (r.ok){
          r.json().then(data => {
            setRefresh(!refresh)
            setApiError({})
          })
        } else {
          r.json().then(err => {
            setApiError(err)})
        }
      })
    }
  }

All of my components that processed data like this all follow a very similar logic pattern. I replaced these fetch requests with the following on the frontend:

function submitData(values){

    if (values.id === ""){
      socket.emit("new_coach", values, result => {
        if (result.ok){
          setRefresh(!refresh)
          history.push(`/coaches/${result.data.id}`)
          setFormData(result.data)
          setApiError({})
        } else {
          setApiError(result.errors)
        }

      })
    } else {
        socket.emit("update_coach", values, result => {
        if (result.ok){
          setRefresh(!refresh)
          history.push(`/coaches/${result.data.id}`)
          setFormData(result.data)
          setApiError({})
        } else {
          setApiError(result.errors)
        }
      })
    }
}

Above, the socket.emit() function has three arguments: the name of the room, the data we are transmitting, and an optional acknowledgement. The acknowledgement we have to design and set up on the backend so that my app maintains the same code logic as before.

On the backend, I originally had API routes to handle get / post requests and get / patch / delete requests. Using socketio, I removed the following:

class CoachesIndex(Resource):
    def get(self):
        coaches = Coach.query.all()
        response = make_response(
            coaches_schema.dump(coaches),
            200
        )
        return response

    def post(self):
        ch_data = request.get_json()

        del ch_data["id"]

        try:
            new_coach = Coach(**ch_data)
            db.session.add(new_coach)
            db.session.commit()

        except Exception as e:
            error_message = str(e)
            return {"errors" :  error_message }, 400

        response = make_response(
            coach_schema.dump(new_coach),
            201
        )

        return response

I register events that correspond to the frontend's emitting response, one for new objects being created, and another for objects being updated. For the coach path I created the following:

@socketio.on("new_coach")
def handle_new_coach(data):
    result = {
            "data" : None,
            "errors" : {},
            "ok" : False
                }

    del data["id"]

    try:
        new_coach = Coach(**data)
        db.session.add(new_coach)
        db.session.commit()
    except Exception as e:
        error_message = str(e)
        result["errors"] = error_message
        return result

    result["ok"] = True
    result["data"] = coach_schema.dump(new_coach)
    refresh_all_data()
    return result

The data from the frontend can be received as a parameter within your function whereas before the data is received from the request object and pulled using get_json() function. There are some other changes as well:

I create a result dictionary. here I mimic some of the response attributes the frontend is dependent on.
if creating and submitting the data was successful to the DB, I call on that refresh_all_data() function. When it runs, it emits data to the rooms I specified however, nothing happens yet...
I return the result dictionary. In socketio for python, acknowledgements is provided through returns at the end of your socketio.on function

On the frontend, the component reads if the response is ok. This works similarly to previous way where I cause a change on the dependency array that the useEffect utilizes (refresh variable). This causes the code within it to run, allowing the rooms to be read, and for my app to update.

Thank you for reading my blog. While not the most common use of socketio, implementing this technology was fun and interesting. I hope others who are on this journey can utilize some of the things I learned.

Formik and how to create static and dynamic inputs

Chris — Fri, 13 Oct 2023 16:08:45 +0000

Formik is a lightweight library that makes building forms in React easier and more streamline. It helps with:

Managing values in state
Handling form submission and resets
Validation and error messages

You can create formik forms by either using useFormik() hook or using the <Formik /> component. For our example, we will be using the component version, which gives us access to various advanced features that can't be utilized using the hook version.

For the purpose of this lesson, we will be covering the following

Creating a basic form with an input and selection field
Creating a dynamic list of an input and selection field

To start, install formik using your package manager (I used npm), and import the following modules into your React App: import { Formik, Form, Field } from "formik".

To create your first form, we start with the <Formik> <Formik /> component

Next we will pass the following props into this component

function App(){
  const colors = ["Red", "Green", "Blue", "White", "Black", "Yellow", "Orange"];
  const subjects = ["Calculus", "English Lit", "History", "Social Studies", "Physics"];
  const initialValues = {
    name: "",
    color: "",
   }
...
return (
     <Formik
        initialValues={initialValues}
        onSubmit={values => alert(JSON.stringify(values, null, 3))} >


     </ Formik>
)}

Within our app, we are creating an initialValues dictionary and passing that into the initialValues prop. We are also creating a list of colors and subjects to use later in our form. For our onSubmit, we call a function and pass values into an alert. This can also be a callback function written elsewhere in your App.

Next, for a simple input and selection form, we will insert the following within the <Formik> </Formik> components:

<Form >
     <label>Student Name</label>
     <Field name="name" placeholder="Jane Doe" />


     <label>Favorite Color</label>
     <Field name="color" as="select">
          <option label="Make a section" value="" />
          { colors.map(color => <option key={color} label={color} value={color} />) }
     </Field>


     <button type="submit">Submit</button>
</Form>

Now you have a basic form that manages the values of all of your inputs and passes them into a function when you submit it. The first <Field /> manages the data that gets passed into the "name" key of your initialValues. The second <Field > </ Field> manages your selection. The child components are: the first one is an option element with a blank value. The second is a map of the colors list where each color gets assigned its own option value. Last, you have a button whose type is "submit". You do not need to explicitly state what your onClick does as Formik captures this as your onSubmit. However, you can control this action.

Now to use more advanced features of formik, we will convert our code so that the <Formik> component accepts a function as its children (this is formally known as a render prop).

     {formik => (
          <Form >
            <label>Student Name</label>
            <Field name="name" placeholder="Jane Doe" label="Student Name" /> <br /> <br />


            <label>Favorite Color</label>
            <Field name="color" as="select">
              <option label="Make a section" value="" />
              {colors.map(color => <option key={color} label={color} value={color} />)}
            </Field> <br /><br /> <br />

            <button type="submit">Submit</button>
          </Form>
    )}

Using this gives us access to quite a few props that handle submitting your data, handling change, counting submissions, etc.

If you're curious to see all of the props that get passed down, add a {console.log(formik)} to your code within this function.

To get a full list and understanding of the formik prop library, go to their documentation page.

Now to make our form dynamic.

Include FieldArray within your formik imports. Next, change your initialValues dictionary to include a third key where the values are an array of dictionary objects

  const initialValues = {
    name: "",
    color: "",
    records: [{ subject: "", grade: "" }]
  };

Within the render prop, below the 2nd field and above the submit button, we will add our <FieldArray name="records"> </ FieldArray> Component. We pass "records" as the name of our array, which is the same key name within our initialValues dictionary.

Next you are creating another render prop within the <FieldArray> component.

<FieldArray>
     {({remove, push }) => (
          <div>


          </div>
     )}
</ FieldArray>

For the purposes of our blog, we will only use the remove, and push prop functions.

Now to make this dynamic, we will utilize the following code within the div

{formik.values.records.length > 0 && formik.values.records.map((record, index) => (
    ...
))}

We need to map the records array however, if there are no elements, javascript will give you an error. So to prevent this, you'll need to use a logical AND statement and start it by testing the length of the array as greater than 0. If this evaluates to true, then you can map the array as your 2nd operand. A returned mapped list will result in a truthy result. A logical AND statement where both operands are truthy will result in the value of the last operand returned, which in our case, is the returned map results.

Here is complete code within this block:

<div>
{formik.values.records.length > 0 && formik.values.records.map((record, index) => (
     <div key={index}>


          <label>Grade Value</label>
          <Field name={`records.${index}.grade`} />


          <label>Subject</label>
          <Field name={`records.${index}.subject`} as="select">
               <option label="Make a section" value="" />
               {subjects.map(subject => <option key={subject} label={subject} value={subject} />)}
          </Field> 


          <button type="button" onClick={() => remove(index)}>Remove</button>
     </div>
))}
<button type="button" onClick={() => push({ grade: "", subject: "" })}>Add More</button>
</ div>

This is similar to our first simple form example except the following important details:

for both field names, it needs to be dynamic. The name is the records array, the index number, and the key you're accessing.
A button is within the map, which the purpose is to use the remove prop. map allows you to access the element's index as the second argument. So passing this into the remove function removes the specific element within the array
A button is outside of map but within the our fieldArray render prop. This button adds to the array by pushing an element that contains keys to blank values.

When you submit your form now, you can see the values of your static list and also the values of your dynamic list.

I hope this has been a helpful posting. I created the above form with some minor formatting as a codesandbox. Check it out below

Thanks for reading and happy coding!

Understanding List, Set, and Dictionary Comprehension in Python

Chris — Sun, 30 Jul 2023 00:18:08 +0000

List comprehensions in python is a powerful tool that allows you to create lists, sets, and dictionaries with a single line of code. When using list comprehensions to create your lists, you can utilize conditional logic, expressions, and callbacks functions to control the output of the elements pushed into the new list.

There are many ways of creating lists in python. We will specifically discuss for loops, list comprehensions and how the two are similar.

To create a list using a for loop, you must

Instantiate an empty list
Loop over an iterable (such as a list, tuple, range, or dictionary object)
Append each element to the end of the list

Using a for loop, let's create a list that contains the double of values 0 - 10:

double = []
for i in range(11):  
    result = i * 2
    double.append(result)
double
# >>> [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

Using list comprehension, we can simplify this into one line of code

double = [ i * 2 for i in range(11) ]
double
# >>> [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

To filter which value gets doubled, we can add a conditional if statement. We only want even numbers to be doubled and stored in the list.

double = []
for i in range(11):
    if i % 2 == 0:
        result = i * 2
        double.append(result)
double
# >>> [0, 4, 8, 12, 16, 20]

With list comprehension:

double = [ i * 2 for i in range(11) if i % 2 == 0]
double
# >>> [0, 4, 8, 12, 16, 20]

We can also add an else clause and make it an if expression; if the value is even, double it, else return another thing (let’s use the word "hi" ). Note, the structure of the list comprehension will be different:

double = [ i * 2 if i % 2 == 0 else "hi" for i in range (11)]
# >>> [0, 'hi', 4, 'hi', 8, 'hi', 12, 'hi', 16, 'hi', 20]

The reason for this is due to the syntax of a list comprehension:

new_list = [ expression for item in iterable optional_if_condition ]

List comprehension are structured using three important components as well as an optional fourth:

an expression
the item
the iterable
optional if statement

The expression can be the item itself, a call to a function, or any expression that returns a value. For instance, you can have a list with 10 "hi": greetings = ["hi" for i in range(11)]

The item is the element in the iterable.

The iterable can be a list, set, dictionary, range, or any object that can return its elements one at a time.

The optional if statement acts as a filter. If the conditional evaluates to True, the expression component evaluates and the return value gets pushed into the list, otherwise the expression does not run for that round of the iteration. Using the above example, you can have a list with 10 "hi" if your conditional is "if True" or a blank list if your conditional is "if False". For complex filters, a function can be used to do your analysis.

The benefits of using list comprehension are that you can use a single tool in many situations to create lists. In JavaScript, you can create new lists utilizing the .map() and .filter() methods. However, there isn't a method that combines the two. Python also has .map() and .filter() methods as well. But fortunately in python, with list comprehension, you have 1 tool that can utilize both methods at your disposal.

Python contains other list data structures and you can apply comprehension to them as well. I will specifically cover set and dictionary comprehension.

Set and dictionary comprehension are similar to each other. Both set and dictionary use curly brackets and outputs unique elements into an unordered list but with dictionaries, you must also include values that corresponds to the key.

The syntax:

new_set = { expression for item in iterable optional_if_condition }
new_dict = { key_expression : value_expression for item in iterable optional_if_condition }

Let's create a set list where it contains the letters of a sentence

sentence = "Today, we are learning list, set, and dictionary comprehension"
set_sentence = { item for item in sentence}
set_sentence
# >>> {',', 'l', 'm', 'T', 'r', 'a', 'e', 'n', 'i', 't', 'c', ' ', 's', 'p', 'd', 'o', 'y', 'w', 'h', 'g'}

Now let's create a dictionary where the key is the letter and the value is the count of each character in the sentence.

set_sentence = { item : sentence.count(item) for item in sentence}
set_sentence
# >>> {'T': 1, 'o': 4, 'd': 3, 'a': 5, 'y': 2, ',': 3, ' ': 8, 'w': 1, 'e': 6, 'r': 4, 'l': 2, 'n': 6, 'i': 5, 'g': 1, 's': 3, 't': 3, 'c': 2, 'm': 1, 'p': 1, 'h': 1}

Additionally for dictionary comprehension, you can use 2 items if the iterable returns two values. For instance, we can create a dictionary enumerating a list or using .items() method on an existing dictionary.

fruits = ["apples", "bananas", "grapes", "oranges", "pineapples"]
fruit_dict = { key : value for key, value in enumerate(fruits)}
fruit_dict
# >>> {0: 'apples', 1: 'bananas', 2: 'grapes', 3: 'oranges', 4: 'pineapples'}

phone_book = {"John" : 3334445555, "Rose" : 5555555555, "Alan" : 1234567890}
phone_book_edit = { key.upper() : value for key, value in phone_book.items()}
# >>> {'JOHN': 3334445555, 'ROSE': 5555555555, 'ALAN': 1234567890}

I hope my guide helped you on your programming journey. Please feel free to comment, ask questions, or provide feedback.

Lastly, happy coding!

An Overview on how to use State in React

Chris — Fri, 12 May 2023 20:04:42 +0000

In React, a virtual DOM is created to allow more efficient browser DOM manipulation and re-renderings. To allow React to know which components to update when a change in information occurs, it utilizes "state". State of a component is an object that holds information that may change over time and / or due to interactions by the user. This allows React to know when to re-render the component. And within a recent update to React, hooks are introduced to allow you to use state and other React features easier without writing a class (https://legacy.reactjs.org/docs/hooks-intro.html).

Before we begin, there are some import rules for hooks (like useState and others)

Only call hooks at the top level of a function component. Think of it similarly to the import statement
You can't call hooks inside loops or conditions.
Hooks can only be called from React Functions.

Let's say you have a button, and every time you click it, it increases a counter. In vanilla JS you would have to

create an event listener and attached to the button element
go into the DOM and access the element that contains the counter value
increment it
and then append the element

Let's do this instead using React. Let's write out our basic Component.

import React from 'react'

function CounterExample(){
    let counter = 0

    return(
        <div>
            <h1>You have clicked the button {counter} times so far!</h1>
            <button>Click me</button>
        </div>
    )
}

export default CounterExample

First, we need to import useState from the react library.

import React, { useState } from 'react'

Next, we need to call on useState, which the argument it accepts will be the initial value of your state variable.

const [counter, setCounter] = useState(0)

There are a few things going on with the above line of code.

First, useState returns a 2-element array. The first element is the state variable with the initial argument you passed into the useState function. The second element is the setter function that sets the first element's value. You cannot assign a new value directly to the state variable. Instead, you use the setter function to set the value. This is how React knows when to re-render the component
Second, the above line uses JS destructuring. You can separate the elements of an array or properties of an object into separate variables all within 1 line. In the above case, the first element is the state variable and the second is the setter function

Important note, it is a common programming pattern to add the word "set" in front of the state variable name when assigning it as the setter function. So "formData", "counter", "color" will be "setFormData", "setCounter", "setColor", etc.

Next, we need to create our React event listener and increment our state variable

import React from 'react'

function CounterExample(){
    const [counter, setCounter] = useState(0)

    return(
        <div>
            <h1>You have clicked the button {counter} times so far!</h1>
            <button onClick = { () => setCounter(counter+1)} > Click me</button>
        </div>
    )
}

export default CounterExample

We're passing a callback function that increases the value of counter by 1. As mentioned before, you can't just assign a new value to counter. Instead, you need to pass a new value to setCounter. React will update the state variable and know to re-ender that component.

Now every time you press the button, the counter value increases and gets updated within the DOM.

When using forms, you need to capture the input values using state. However, if you have multiple inputs, using so many state variables can become convoluted. Besides passing single values, you can pass arrays or objects into state and state setter functions

For example:

import React from 'react'

function CounterExample(){
    const [counter, setCounter] = useState(0)

    return(
        <form>
            <input name = "firstName" type = "text" placeholder="First Name Here" />
            <input name = "lastName" type = "text" placeholder="Last Name Here" />
            <input name = "age" type = "number" placeholder="age" />
            <button>Submit Values </button>
        </form>
    )
}

export default CounterExample

instead of creating multiple state's, you can create 1 state to capture all three inputs

const [form, setFormData] = useState( {"firstName": "", "lastName" : "", "age" : "" })

So, when you create your event listener for each input, you can create 1 event listener that accesses the key value pair within the object and update it.

function handleOnChange(e){
    const key = e.target.name
    const value = e.target.value

    setFormData({...formData, [key]: value})
}

Please note, if you are using objects or arrays with state, you need to pass a COPY of it. You cannot use mutable array methods. However, you can "spread" the array or object into the setter function.

The final set of code will be:

import React from 'react'

function CounterExample(){
    const [form, setFormData] = useState( {"firstName": "", "lastName" : "", "age" : "" })

    return(
        <form onSubmit = {submitCallBackFunction}>
            <input onChange = {handleOnChange} name = "firstName" type = "text" placeholder="First Name Here" value={formData["firstName"]}/>
            <input onChange = {handleOnChange} name = "lastName" type = "text" placeholder="Last Name Here" value={formData["lastName"]}/>
            <input onChange = {handleOnChange} name = "age" type = "number" placeholder="age" value={formData["age"]}/>
            <button>Submit Values </button>
        </form>
    )
}

export default CounterExample

Lastly, you should declare your state variables within the component that will use them. However, if another component needs to use this variable, then the closet parent to both is where state needs to reside, and then brought down via props.

The best way to brainstorm this is to create a component map.

index.js
|--- App
    |--- Header
    |--- DisplayData
    |--- AddData

DisplayData needs a state variable to display some data. However, AddData contains data that will eventually be added to the state variable within DisplayData. So, App will contain the state data variable and then passed that down to DisplayData while passing down the setter function to the AddData component.

Also, AddData contains forms which need to be controlled. A separate state variable will be needed to keep tract of the input values. However, based on how our app is configured, it can stay within this component. When the user presses submit, a callback function or the setter function can be passed down to add the new data to the data state variable.

Our new map will look like this. (Please note you can design your map however you like but make it so that it shows a logical map of where your state variables are established!)

index.js
|--- App (data, setData)
    |--- Header
    |--- DisplayData <- data |
    |--- AddData <- setData | (formData, setFormData)

Lastly, when react re-renders the component where the state variable is assigned, it will render every child component underneath it as well but not parent or sibling components.

I hope my above guide helped you on your programming journey.

Lastly, happy coding!

Remember To Take Into Consideration Pass by Value Vs Pass By Reference When Working With JSON data

Chris — Mon, 13 Mar 2023 22:27:27 +0000

For my phase 1 final project of the Flatiron Software Engineering Bootcamp, I created a single page website that displays the breweries of New York City. I used a public API from Open Brewery DB but needed to filter the massive dataset down to just breweries located within the city. To accomplish this, I first acquired a CSV file with all of the zip codes of NYC and created a dictionary object using this data. Breweries that matched with the NYC zip code were pushed into a new array and eventually saved into its own db.json file. While I was able to do this successfully, I noticed some wonky behavior concerning some the arrays and objects I created and the various iterative methods I called on them. After deep diving into the problem and debugging the issue, I figured out the cause of this buggy behavior; I was not taking into consideration pass by value and pass by reference.

Before I begin, I want to provide a quick review of the iterative methods I used frequently to complete my labs, homework’s, and final project: .map(), .filter(), and .forEach().

`array.map()`

How .map() works: it takes the elements within the array it was called on, does something to each element with a function you provide, and returns the processed elements in a new array. The original array stays the same

myArray = [0, 1, 2, 3, 4, 5]

const result = myArray.map(element => {
    return element * 2
})

console.log("The new array is: ")
console.log(result)

console.log("The original array is: ")
console.log(myArray)

// The new array is: 
// [0, 2, 4, 6, 8, 10]
// The original array is: 
// [0, 1, 2, 3, 4, 5]

`array.filter()`

How .filter() works: it takes the elements within the array it was called on, and runs each element through some conditional statement or function, and if it returns true, places the original element into a new array.

myArray = [0, 1, 2, 3, 4, 5]

const result = myArray.filter(element => {
    element = element * 2
    return element > 3
})

console.log("The new array is: ")
console.log(result)

// The new array is: 
// [2, 3, 4, 5]

Notice that even though each element was doubled, the original value of the element was pass into the array.

`array.forEach()`

How .forEach() works: it takes the elements within the array, and does something to each one with a function you provide. It sounds similar to .map() except .forEach() doesn't return the element or processed element. You can declare a variable, array, etc. outside of the function and assign or push the element into this variable (but then it is better to use .map() in this case). .forEach() is useful if you are calling a function on each element but do not need to return a new array.

const myArray = [0, 1, 2, 3, 4, 5]

const result_1 = []

const result_2 = myArray.forEach(element => {
  element = element * 3
  result_1.push(element)
  return element
})

console.log("original: ")
console.log(myArray)

console.log("result_1: ")
console.log(result_1)

console.log("result_2: ")
console.log(result_2)
// original: 
// [ 0, 1, 2, 3, 4, 5 ]
// result_1: 
// [ 0, 3, 6, 9, 12, 15 ]
// result_2: 
// undefined

What does this have to do with pass by value vs pass by reference?

myArray was an array of integers, and integers are primitive values. When you pass a primitive value into a function, a copy of that value gets passed in. You can change the variable within the function but it doesn't change the variable outside of the function

function double (x) {
    x = x * 2
    return x;
}

let y = 100; 
let result = double(y)

console.log(y) // 100
console.log(result) // 200

When working with JSON data, you have an array of OBJECTS, an important distinction here. Objects are passed by reference in JavaScript. What this means is JavaScript passes the direct location / address in memory where the object is located into the function, not a copy of it. If you change a property of an object within the function, it persists outside of the function.

function doubleProperty(obj){
    obj.value = obj.value * 2
    return obj // 
}

const myObj = {value : 10}

console.log("Original object: ")
console.log(myObj)

const result = doubleProperty(myObj)

console.log("New resulting object: ")
console.log(result)

console.log("Original object: ")
console.log(myObj)

// Original object: 
// { value: 10 }
// New resulting object: 
// { value: 20 }
// Original object: 
// { value: 20 }

And even if you remove the return statement, the results are still the same: the original object will get modified. This needs to be taken into account when calling on iterative methods such as .map(), .filter(), and .forEach() on JSON data!

Here is an example. You have json data with the following structure:

{studentName, favoriteColor, favoriteNumber}

If you want to double each student's favorite number and store it in a new array, I would have originally written:

const studentsArray = [{
    "studentName" : "Chris",
    "favoriteColor" : "blue",
    "favoriteNumber" : "15" 
    },
    {
    "studentName" : "Rose",
    "favoriteColor" : "blue",
    "favoriteNumber" : "36" 
    }]


const results = studentsArray.map(studentObj => {
    const newObj = studentObj
    newObj.favoriteNumber = newObj.favoriteNumber * 2
    return newObj
})

console.log("original: ")
console.log(studentsArray)

console.log("updated: ")
console.log(results)

Which results:

original: 
[
  { studentName: 'Chris', favoriteColor: 'blue', favoriteNumber: '30' },
  { studentName: 'Rose', favoriteColor: 'blue', favoriteNumber: '72' }
]
updated: 
[
  { studentName: 'Chris', favoriteColor: 'blue', favoriteNumber: 30 },
  { studentName: 'Rose', favoriteColor: 'blue', favoriteNumber: 72 }
]:

Even if you do not intend on using the original array, for better coding practices, one should take this problem into consideration. Fortunately, there is a way to solve this issue: using the spread operator ....

const results = studentsArray.map(studentObj => {
    const newObj = {...studentObj}
    newObj.favoriteNumber = newObj.favoriteNumber * 2
    return newObj
})

console.log("original: ")
console.log(studentsArray)

console.log("updated: ")
console.log(results)