DEV Community: JustinBass

Hello useContext!

JustinBass — Thu, 09 Nov 2023 05:41:13 +0000

When first introduced to the world of React we tend to make our executions more complex than they need to be. Don't get me wrong, after only a year of studying software engineering my executions at times are more complex than needed. But isn't that the beauty of creating and building out code? Those aha moments?! I had a particular aha moment in the last application I built. It allowed me to realize why hooks can benefit the building process on the frontend of an application. This particular hook I'm speaking of is called useContext.

useContext allows us to share data between components without having to pass that data from a parent component to a child component to another child and so on. The process of passing data like so, is called prop drilling.

Above we have a parent component MoviePage. You can see that I have set a variable selectedMovie with a value of a movie in the database based on a condition. I know I'm going to need this data for this parent's child, ReviewCard. The reasoning behind this is when a review is deleted I can update the selected movie, its reviews, and set a new state for my movie's array and its relations. In my ReviewCard import I pass a prop called selectedMovie equal to our variable selectedMovie. This allows me to use the data from the parent in the ReviewCard child component. I recommend keeping the prop naming conventions the same as the data variable or function names you are passing. As your app grows there's a good chance of easily getting confused with the data you're working with. Doing this will save you time from having to go back and forth between components to remind you of what's actually in front of you.

In our ReviewCard child component we are destructuring our selectedMovie prop. Don't forget to destruct your props! I can't tell you how many times I've forgotten this one small detail and spent hours wondering why my execution wouldn't work. Now I'm able to use the data needed to update the selected movie, its reviews, and set a new state for my movie's array and its relations once a review is deleted. But is this truly considered prop drilling? Remember prop drilling is having to pass data from a parent component to a child component to another child and so on. For this to be considered prop drilling, imagine that the ReviewCard component has a child. This child was the actual component that needed the data from the MoviePage component, which is the parent of ReviewCard. We pass our prop from MoviePage to ReviewCard and pass the prop to this component's child. Ladies, gents, thems and theys... that is prop drilling at it's finest.

Although prop drilling isn't completely frowned upon, useContext can be used globally throughout your application and prevents the action of having to prop drill. A bonus that comes along with this hook is that it will make it easier to keep track of data you want to share with other components and calls for cleaner code. In my application, I have four models set up in the backend. User, Movie, Review, and Reply. On the frontend, all of them will have their state set up for the data they retain. Now I could technically create one provider component where I would create context for all models and set state for data like I did in a project when I first learned useContext:

As you can see, given the useState() setup, I was using one provider component to set the context for all models and their data...🤭 If I'm being honest, I originally thought for useContext to work, the provider component always had to be called UserProvider and we set the state for all models and their data in this one provider component. THIS IS WHY IT'S IMPORTANT TO RESEARCH AND ASK QUESTIONS! Keep in mind you can name this provider component whatever you'd like. However, UserProvider makes sense because this component is technically providing data to other components who may need it. Naming it UserRocks would be a bit odd...

Remember convention over configuration is best practice. Since I have a User, Movie, Review, and Reply model, I want to separate my concerns and give each of them its very own provider component where context will be set for that particular class and its instances:

USER CONTEXT

MOVIE CONTEXT

REVIEW CONTEXT

REPLY CONTEXT

Ahhh, suddenly my anxiety has calmed down. 💁🏽

Giving each model its own provider component to set up context for their data allows for that separation of concern I mentioned earlier. This is where I can say 'Ok, I'm going to put all HTTP requests that relate to this particular model and its data and set state'. That way when the time comes I know exactly where to look, grab from, and update when working with a particular model and it's data in the backend from the frontend.

"VALUE" PROP

Notice in the return of our provider components we have what looks like a prop called value. Well, that's because it is a prop and any child of a provider component has access to that prop and its values! Now what exactly are we setting the values to in this prop? Data that can be or needs to be shared with other components. Maybe something equivalent to an array of all movies that the Movie model holds in our backend or even an array of all the reviews that the Review model holds:

In the snaps above I'm using a useEffect() to send a fetch to a registered route in the back end that will then be mapped to a controller action to render back JSON of all movies in the Movie model database. Within that fetch, I'm setting the movies into an empty array called 'movies' using state. Great, now I have the data I need for movies to render them to the front end. I might just need that array of movies for other purposes rather than just rendering the title, poster, year, and the cast of the movie. So I want to make context out of this array to possibly share this data with other child components that need it. More on that a bit later. I then pass that data under 'movies' as a prop under 'value=' in the case that I do need this data for child components.

Provider Components have child components say whaaa????

Well, how do we make provider components and their prop data available to other components within our app if technically it has no child components? Well, it doesn't have any children yet because we haven't given it any children. In our earlier example with MoviePage and ReviewCard I was able to share the data that the MoviePage has and pass it onto ReviewCard as a prop because ReviewCard is its child! We imported ReviewCard into the MoviePage component and rendered whatever code is set up in ReviewCard from the MoviePage making ReviewC its child. However, without the data provided by the MoviePage what originally was supposed to render visually to the user would not have been possible.

So if we want all components to have access to a provider component data we need to ensure that the provider components are wrapped around the top-level component of our application. To do so we need to import all provider components we'd like data from into our top-level component of the application and then proceed to wrap:

Voila! There you have it, useContext is set and ready to go! No more prop drilling. But how do we use useContext throughout our child components? Let's say I have settings in my application where a user can update their username or user image:

Sure we can request the backend to update the user info through a fetch and change the user state, but what if we have a movie that has many reviews and these reviews render with an image and the username of the user who left the review?

We'd have to update the movie's state within that fetch request. This is where the realization of how great useContext is.

useContext IN ACTION

In my UserProvider component, I have fetches set up to update a user username and a user image:

I know because a movie has many reviews and these reviews are rendered with an image and the username of the user who left the review I will have to update my movies state. Let's say in theory I had set up the state of movies in the top-level component of my application. I might have to prop-drill the movie data down until I reached the child component I need to get to in order to update a state within this fetch. Because I set up context for my movie data I can easily import useContext and MovieContext into the child component of MovieContext, User_Profile. I also destructed my 'prop' { movies } equal to useContext( MovieContext ). Remember, every provider component holds a 'value' prop :

I also imported UserContext into my User_Profile component (a child of UserProvider) and destructed my props updateUsername and updateUserImage that hold a value of my fetch POST functions in UserProvider:

If you look back at my fetch POST functions set up in UserProvider you can see it takes in a movies argument. You can see now because I imported useContext, MovieContext, and destructed my movies prop I'm able to pass in the movie data into my updateUsernameSubmit and updateUserImageSubmit functions for my form onSubmit events:

This will allow for an update on the state of movies so when a user updates their username or image not only will you seen an update on the users profile but also an update on a movies reviews. And guess what?! No PROP DRILLING!:

BEFORE UPDATE

AFTER UPDATE

RESOURCES

Let's talk validations.

JustinBass — Mon, 18 Sep 2023 19:35:27 +0000

As the title states, it's time to talk about validations. What does it mean to validate or to be validated? To keep it short and simple, it is the action of checking or proving the validity or accuracy of something.

In the world of cyber technology, I believe as users of platforms such as Facebook, Instagram, and X (formerly known as Twitter) we don't realize or come to the idea that we are always passing or failing validation checks. For example, if we attempt to sign in to our Facebook account with a valid email but forget to enter our password, we as the user might receive a message stating 'Username or password is invalid'. For the average user, it may not spark enough interest to dive deeper and understand what is causing this particular error. But as passionate coders, our minds start running beyond miles to truly understand and hone in on how the magic of such an error can occur.

In general, a lie would be exposed if a statement was made that we as humans don't like being 'validated' for how we believe things should be executed to prevent mishaps. We have all had roommates in our lifetime at some point. Let's paint a picture here. We have two roommates living together. Roommate one likes using top-notch paper towels because they believe it cleans the best when wiping down counters. Roommate two likes using top-notch dish soap because they believe it clears a high volume of oil off of greasy pots. If roommate two buys cheap paper towels, a conflict might arise with roommate one blocking roommate two from using the paper towels they just bought. Why? Because roommate one does not approve of paper towels that are not of good quality. They believe it won't do the job of thoroughly cleaning the countertops. Visa versa, if roommate one buys cheap dish soap, a conflict might arise with roommate two giving the same outcome as the first scenario.

Just how it would work with our roommate scenario and the conflicts that come along with it, validations in the cyber world work in similar ways. So how do the examples above relate to Ruby on Rails validations? Relating back to the example of logging in to a platform with a valid email but an empty input field for a password, we as the user are blocked from gaining access to our account. Facebook (roommate one) does not approve of the user (roommate two) not having a password or a valid password. In return, Facebook responds and says 'No way am I giving you access to an actual account, the values given do not match the credentials of the user you say or think you are'. A conflict is then raised between the user and the platform. When the user (roommate two) provides a password that passes a credential check, Facebook (roommate one) will validate and approve the user moving forward with the actions they want to fulfill.

Validations with Ruby on Rails are used to ensure data sent through an HTTP request from the client (such as logging in or signing into an account with a username and password) are valid to save to the backends database. If the username and password are not valid this would be considered an unprocessable entity. Validations are helper methods, they help the backend prevent bad data from being saved to the database. These helper methods live within our classes so we can specify exactly what attributes within the instances of these classes we want to set validations on.

In the example above we have a User class that utilizes validation helper methods for attributes on a given instance of the class. The first two validations are set up for the attribute username within the instance. Presence ensures that a username does exist in the login or signup input field (the field can not be left empty). Uniqueness ensures that a username can't be used more than once, meaning if I sign up for Facebook under JustenBass5678, when another user signs up and tries using the exact same username they will get an error on the front end. Let's take a look at how this would look on the client side.

Above we have a signup input field for a user creating a new account on a platform. If we submit this form with the username being blank we should get an error due to the presence validation helper method set up in our User class:

An error should also occur on the client side if we signup with a username that already exists for another user due to the uniqueness validation helper method set up in our User class:

If we as the user change our username from JustenBass5678 to JustenBass22, we should meet all the credentials for the validations set in our User class and gain full access to our new account:

Validations are key for preventing bad data from getting saved into a database. However, it also plays a huge role in security. If Facebook allowed all its users to have the same username it would open a wide door for potential hacking. All it would take is another user having the same username to guess the correct password of another user's account and BAM, they are in. What if the platform wasn't Facebook and it was a Chase Bank account? Then a user can possibly gain access to another user's important financial documentation. Sure it could take some time for a hacker to guess the right password but is possible. You can only imagine the many different ideas and theories on the importance of validations. Just know they are IMPORTANT! For more information on validations and other validations you can take advantage of, check out Rails Guides: Active Record Validations!

Resources

1: Rails Guides: Active Record Validations

CLASSES, INSTANCES, SETTERS, GETTERS, MARCOS... SAY WHAAA?!

JustinBass — Wed, 14 Jun 2023 01:50:12 +0000

A WALK THROUGH TO REMEMBER

Just when you thought JavaScript and React would throw you for a loop, you thought wrong... Ruby decided to swing by and say "Hey girl, hey!". It's not that Ruby is extremely difficult to take on, it's the idea of having to rewire your mind to tackle a whole new coding language. After all, no one said this would be an easy task.

I, and I'm sure many coders, can describe the beginning of learning Object Oriented Programming as shown in the example above. One fighting so hard to grasp the concepts of OOP while having to take a few tumbles before allowing ourselves the time and patience to become one with the language. Let's be honest, this language is significantly bigger than ours and has extraordinary pro behaviors. However, we all must start somewhere and the key to starting "somewhere" is truly understanding the fundamentals and terminology in which we one day dream to master.

CLASSES AND INSTANCES IN OBJECT ORIENTED PROGRAMMING

• A class in OOP are models of the program that act as a blueprint for our objects (an instance), the object's attributes, and methods that we can use on our class itself or instances of that class. That's right, there are class methods and instance methods. More on class methods in future lessons! 😉

• An instance in OOP are objects (an instance) of our class that holds detailed data about oneself acquired from attributes that are set with values after a new instance is instantiated.

CLASS VISIUAL

QUIZ TIME!!!
What is a class in OOP?
A blueprint for our objects(an instance), the object's attributes, and methods that we can use on our class itself or instances of that class.

Before we jump into the visual of an instance it's crucial to know the work a class executes under the hood in order to instantiate an instance of a class. What exactly does it take to instantiate an instance of a class? We know that an instance holds detailed data about oneself acquired from attributes that are set with values after a new instance is instantiated. But how would it be possible for our instance to know about its attributes when instantiated? This is when the extraordinary pro behaviors of OOP take center stage.

CLASS VISIUAL: SETTER AND GETTER INSTANCE METHODS

•A setter method is an instance method. Using this method allows us to set an attribute with a value of our Person class instance post instantiation. You may be looking at @name and thinking to yourself "Well that looks familiar, it's a variable!". Yes, like JavaScript this is a variable without a var, const, or let but instead begins with an @ attached to the variable name. @name is known as an instance variable.

@name becomes an attribute available to an instance of the Person class. In this case, our instance can have an attribute of name that we can set equal to a 'string' value (or any data type value. In our case a name in real life, would be set to a 'string' data type) after we instantiate a new instance of the Person class. However, a setter method couldn’t be used to its best ability without its side kick...getter method.

• A getter method is a method of an instance and pairs perfectly with a setter method. Think of the setter method as a writer. Its job is to take in an argument through its parameter, write it to the instance variable @name, and store it away in memory. Let's take a look at what would happen if we instantiate an instance of the Person class without a getter method:

• Above we have our Person class set with just a setter method that creates an attribute with an instance variable. Now it's time to instantiate an instance of the Person class and set its name attribute equal to a 'string' value:

• Here we’re saving our new instantiated instance to a local variable called justin. We then take that variable with a value of our new instance and call it on our setter method within our Person class, name=. Remember the setter method has the responsibility to take in an argument through its parameter, write it to the instance variable @name, and store it away in memory. Although we would be able to set the name attribute for our new instance given the setter method "name=", what would happen if we called our instance on justin.name in order to see the name value of the attribute within the instance assigned:

•As you can see from the example above, we would get an error stating "NoMethodError: undefined method 'name' for #<Person:0x000000011d969bf0 @name="Justin"> Did you mean? name=". When one sees NoMethodError we should assume as a coder there is no method existing that we can call this instance on. This is why the error is asking us "Did you mean? name=". Keep in mind name= being the setter method, is a completely different call than name being the getter method. Let's bring the getter method back into the equation of our Person class:

•Now what would happen if we called our new instantiated instance on justin.name_?:

•As mentioned name= being the setter method, is a completely different call than name being the getter method. This is why a setter method and a getter method go hand and hand. A setter method is a writer. Its job is to take in an argument through its parameter, and _write it to the instance variable @name. A getter method is a _reader. Its job is to read what the setter method saved in memory for us, to the world.

Without both instance methods working together we wouldn't have the full functionality we desire!

SETTER AND GETTER METHODS: MARCOS

It may seem tedious to explicitly code out setter and getter methods within a class every time we'd want to set a new instance with an attribute. Surely, there has to be an easier way to write out both methods. If there is a will, there is most definitely a way. What is another method we could use that essentially is a setter and getter method? Drum roll, please!!! 🥁 MARCOS!!!``

• A marco, is an instance method that implicitly represents our setter and getter methods. Marcos allows the representation of both methods individually or in a lump sum. Are you confused yet? Let's break it down!

MARCOS SETTER AND GETTER METHODS VISUAL: MARCOS REPRESENTING ONE

A marco can represent both a setter and getter individually. Typically it's best to start with a setter method within a class model. Our setter method is what allows us to create an attribute that our instance of the current class can adopt. We'll stick with our name attribute for this instance. Here's an example of a marco representing a setter method implicitly:

It's important to know and understand a setter method is a writer. Its job is to take in an argument through its parameter, _write it to the instance variable @name, and store it away in memory_. The same exception happens implicitly with marcos. As shown in the example above, the marco syntax for a setter method is "attr_writer :attribute_name". All attribute names within this syntax must begin with a colon. We should now know if calling this method on an instance, the instance will adopt a name attribute when given a value equal to a 'string' datatype:

Intuitively, we know if we call our instance on justin.name in order to see the name value of the attribute on our instance, we would get an error stating "NoMethodError: undefined method 'name' for #<Person:0x000000011d969bf0 @name="Justin"> Did you mean? name=":

QUIZ TIME!!!
Why are we getting the error "NoMethodError: undefined method 'name' for #<Person:0x000000011d969bf0 @name="Justin"> Did you mean? name="?
There is no method that exists that we can call this instance on!

This tells us we need a marco that implicitly represents a getter method within our Person class:

The marco syntax for a getter method is similar to the syntax for a setter method with a slight difference. Recall that a getter method acts as a reader. Its job is to _read what the setter method saved in memory for us, to the world._ With that being said, what do you think the marco syntax would be for a getter method? Keep in mind the syntax will always start with attr_. This makes sense seeing that we're setting up an attribute within the Person class for our future instances. If the syntax for a setter method is attr_writer with writer being the key word, what is a key word that describes a getter? READER!:

Notice we still need to include the name of the attribute beginning with a colon for our implicit getter method provided by marcos. If we think back to the explicit versions of our setter and getter in the Person class, both methods had a representation of the instance variable @name. This is crucial seeing that it helps keep the flow of reading and writing our attributes in sync. Now it's time to put our tag team marcos to the test!:

If this isn't magic, I don't know what is! We were able to initiate an attribute for our future instances of our Person class given the marco setter method. Even more, we gracefully read the value of the attribute to the world given our marco getter method. Job well done! However as coders, any opportunity given where we can make our code excel in ways we never thought possible, we take it! Although marcos is short-hand for writing explicit setter and getter methods, you would think there's one marco syntax that would implicitly set up both methods for us in lump sum. Bust out your inhalers because you'll be shocked that there is!

MARCOS SETTER AND GETTER METHODS VISUAL: MARCOS REPRESENTING BOTH LUMP SUM

I know what you may be thinking if you're new to the coding world. "WHY IN THE WORLD DID YOU NOT EXPLAIN MARCOS IN THE FIRST PLACE!" I get it. Yes, marcos is an easier set up than explicit setter and getter methods. However, we all must start somewhere and the key to starting "somewhere" is truly understanding the fundamentals and terminology in which we one day dream to master. Without understanding the fundamentals and terminology from which a method truly stems, how do we expect to understand how the "easier" way of doing things actually works? Especially when it's implicit. You know what they say! Slow and steady wins the race.

If you made it this far and truly have a grasp on the concepts of a class, instance, the origin of setter and getter methods, please indulge in our final marco that implicitly represents both a setter and getter lump sum.

Let me introduce to you attr_accessor. The marco attr_accessor allows for a setter and getter method to be grouped into one marco. We no longer need to write two separate marcos, only one marco saving us time:

Notice with this syntax we still need to apply a colon followed by the attribute name. With our Parent class and marco attr_accessor set up lets instantiate' a new instance of our class saved to the variable, justin`:

As with our explicit and implicit methods before, our next step would be to take the variable justin with a value of our new instance and call it on our setter method implicitly nested in our marco, name=. This will allow us to officially initialize a name attribute with a "string" value within our the new instance:

Last but not least it's time to read to the world the value of the name attribute within our new instance! But how? Take the variable justin with a value of our new instance and call it on our getter method implicitly nested in our marco, name:

THE END OF THE WALK

We learned the role of a class model and the impact it has in order to instantiate an instance. It also has the ability to to act as a blue print which can hold instance methods that can be called on by an instance of our class. But what if we wanted our instance to have attributes to give the instance a volt packed with detailed data? We would have to imprint setter and getter methods within our class. Because an instance is only an object with an identifier number, it is our job to take advantage of different types of instance methods if we want to set attributes. To do so, we learned how to write explicit setter and getter methods. One method has the responsibility of writing an attribute and the other method has the responsibility of reading the value of the attribute to the world.

With being more than a few ways to write out setter and getter methods, we learned how to take on marcos. A marco is an instance method that implicitly represents our setter and getter methods. Marcos allows the representation of both methods individually or in a lump sum. Both syntax of a marco work under the hood exactly the same. However, writing an attr_accessor is less time consuming than writing attr_writer and attr_reader. Keep in mind the coding world is complexed with strategy and self coding awareness. There will be times using a specific marco syntax will come into play!

Until next time coders! Happy learning and coding! ✌🏽

Resources

1. Ruby Classes and Objects link

2. Ruby Setters and Getters link

3. Ruby Setters and Getters Link Two link

4. attr_accessor, attr_writer and attr_reader link

5. attr_accessor, attr_writer and attr_reader Link Two link

Components and Props in React!

JustinBass — Tue, 14 Feb 2023 03:37:14 +0000

What is a Component?

Components in React are templates for our code. When you think of the likes of Amazon and Facebook, we can see that there are many different areas of these applications. These areas are responsible for their own functionality. The bigger the application, the more complex it becomes to keep track of these functionalities. Using components allows us to modularize functionality as well as presentation within our code.

Creating a Component

The number one rule when creating a component is to have it initialized at the front end with a capital letter. This is how we differentiate between a normal function and a component:

In the code snippet above we've created a component called App. Within the body of our component we have a return statement that holds some JSX (JavaScript XML). JSX allows us to write HTML directly inside of REACT. When rendered to the browser we will see 'Hello, DEV Community':

What if we said App was our High-Order component? Meaning, we simply just want to make App responsible for only rendering children components that hold their own functionality and JSX? Not only will this prevent cluttered code in comparison to only using a single component to render all of the work, but it will help us keep track of different areas of our application that are responsible for their own functionalities and JSX.

How does this work?

I know you're probably thinking what in the heck is this guy talking about?! Let's break this down:

**Step 1:** Let's first remove our JSX elements from our return statement in our **App component**. We will keep our **div** element seeing that in **React** it is a must to have a **div** element if we plan on having more than one element in our JSX template. In our case, we will have more than one child component being rendered in our return statement of our **App component** (parent component) between our main **div** element:

Step 2: Next, we will create a separate component called Header in React where we want our h1 element 'Hello, DEV Community!' to live and later be imported into our App component:

Step 3: Now that we have our child component (Header) set up, we need to figure out a way to render the component in its parent component (App).

In order to make this possible we will have to export the **Header component** like so:

Step 4: We're not done yet. If you look at the browser we still don't see 'Hello, DEV Community!' being rendered:

Why is that? We not only need to export the Header component, but also need to import the component in its parent component (App):

If we check our browser again, we still don't see 'Hello, DEV Community!' What in the world is going on?!

Step 5: There's one last step we need to do before we can see 'Hello, DEV Community!' rendered to the browser. What do you think that is?

Earlier I mentioned 'We not only need to export the Header component, but we need to also import the component in its parent component (App)'. Once imported, we can render the Header component inside the return statement of our App component:

Now if we check our browser we will see 'Hello, DEV Community!':

Conclusion On Components:

Note that we can use a component more than once! Whether it be in the App component or another parent component to the Header component.

Let's take a look at this example:

Notice that we are rendering the Header component twice inside the return statement of the App component after the Header component is imported. What do you think will happen?

We would see 'Hello, DEV Community!' rendered twice inside of the browser:

The beauty of components is it allows us coders to keep our code clean and organized. If we were to do all of our functionalities and JSX only in our App component, sure, it could work when done correctly. However, if we took that route there would be a massive amount of functionalities and JSX in one component. As coders, we don't want that to happen. Doing so will cause a clutter of unorganized code making it hard for other coders and yourself to keep track of the application as it expands. If we modularize our code into different components we are able to break our functionalities and JSX into separate parts making it easier to control the entire application.

What are Props?

Props go hand in hand with components. Props allow us to pass information or data down from a parent component to a child component.

So how do we use props? Let's go back to our App component:

Right now we are not establishing a prop within the App component. Let's say I wanted to pass information down to my first rendered Header component within the App component return statement where our JSX template lives. How would I go about doing this? Let's break this down:

**Step 1:** First we would need to create a name for the prop and have its value be the information or data we want to pass down to our **child component (Header)**:

Step 2: Next we would need to de-structure the prop (about) in the Header components parameters using curly braces:

Step 3: If we wanted to create an h2 element in our Header components JSX template and use the value of the prop (about) to represent the innerText of our h2 element, we can:

Now if we take a look at our browser we can see that our prop passed down from the parent component (App) was utilized in our child component of App (Header):

As you can see, the second render of the Header component was not affected because we did not assign it a prop value like we did for the first rendered Header component.

We can prove that when a component is re-used we can give that re-used component its own prop value without affecting the original component first rendered. Let's add a prop to the second rendered Header component in the App component with a new value:

Step 4: Now that we have added a prop to the second rendered Header component with a new value, we can de-structure the prop (aboutTwo) inside the parameters of the Header component:

Step 5: If we wanted to create an h3 element in our Header components JSX template and use the value of the prop (aboutTwo) to represent the innerText of our h3 element, we can:

Let's take another look at our browser. We can now see that our second prop passed down from the parent component (App) was utilized in our second rendered child component of App (Header):

Conclusion on Props:

As mentioned props allow us to pass information or data down from a parent component to a child component. This can come in handy when more than one component needs to share the same information or data from a parent component.

**Resources:** **1. Components & Props**[link](https://reactjs.org/docs/components-and-props.html)

THE WORLD OF ITERATION.

JustinBass — Thu, 17 Nov 2022 08:18:36 +0000

STRUGGLE.
- Make forceful or violent efforts to get free of restraint or constriction.

Being a beginner in the coding world is like being a reborn infant struggling to execute words with pronunciation. Even more so like being an infant struggling to open your eyes for the first time to take in the world's light. When it comes to iterating in JavaScript, it is key to know and understand the types of methods you can use with iteration. The goal here is to set yourself up for a smooth experience without Mr. Struggle Bus hovering over you.

ITERATION.
- A procedure in which repetition of a sequence of operations yields results successively closer to the desired result.

I, myself struggled to understand the types of methods used to iterate over arrays and array objects. "Keep moving through the curriculum and eventually you will understand these methods further down the road." Well, when I ended up down that road I still found myself a bit lost, confused, and frustrated. It was then that I realized I needed to go back, review, and have a full understanding of what was happening underneath the hood of all iteration methods. Why? Because reading and understanding are fundamental!

TYPES OF ITERATION METHODS

A few iteration methods that stood out to me the most in JavaScript are as follows:

.map()
.find()
.reduce()
.forEach()

Each of these methods has a unique execution-style within JavaScript. And as mentioned, it is essential to understand how they work so we know the right time and the right place to use them. In a perfect world, one method would work on every single array or array object. But let's be honest with ourselves. Perfection is insanity! We don't want to end up like Meryl Streep in 'Death Becomes Her' so focused on just one potion fixing all of our problems. We all witnessed how that turned out for her. If we thought only one of these methods would work with our coding we would never evolve as software engineers.

.map()

What is the .map() method?
The .map() method is used when we are looking for specific values matched with a specific key within an array object to create a new array of just those values.

Example:
Let's say we have an array object (list) of celebrities who offer Celebrity Cameos to fans. In the array object, we have each celebrities name, career, and cameo set price. Take a look at the snippet of code below, study it, and ask yourself "How can I get a list of all cameo prices for each celebrity involved to create a new array of just those prices?".

If you guessed we have to use the .map() method. Bravo!👏🏽

Where do we go from here?

There are two ways we can execute a new array of just the key-value pair "cameoPrices" as shown in the example above. the first syntax we can use within a .map() method is an arrow function within the .map() method. The second syntax we can use is an anonymous function assigned to a variable and call that function later using the .map() method.

What is an arrow function?

An arrow function is a great way to make your code look clean and less cluttered. It does not need a literal "return" typed. We don't need to use {} (brackets) to create a function body. It is best practice to use arrow functions to keep your code modern.

This is arrow function syntax:

What is an anonymous function?

An anonymous function essentially does the same work as arrow functions. However, we do need to use {} (brackets) to create the body of the function. The body of the function is where we tell or function what to do. We do have a literal "return" typed within the body function.

This is anonymous function syntax:

As you can see, using arrow function syntax allows us to shorten our code in comparison to using anonymous function syntax. With arrow functions we can get rid of the word " function", our brackets {} that create the body of our function, and the word "return". This makes for cleaner code on a single line.

In some cases, we can also get rid of the parentheses in our arrow function if the function has a single parameter. In the above example, we have two parameters happening in our arrow function. But what would it look like if we had one?

Take a look!

Putting the .map() method to use with arrow functions

Now that we can spot the differences in syntax between arrow functions and anonymous functions, let's finally put our knowledge to the test using both syntaxes to create a new array of the specific key-value pair we are looking for. In our case, we are looking for each celebrities "Cameo Price".

Take another look at the array object of celebrityCameo:

Creating a new array of Cameo prices using a single arrow function.

STEP ONE:
We need to assign our .map() method that holds our arrow function to a variable name. Make the variable name not only make sense to you but to your viewers (coworkers) who may have to go in and debug your code down the road. I'm going to assign our .map() method to the variable name "prices". This is because we want to create an array of prices that represent each celebrity's cameo. This again will make sense to you plus your debugger team.

Notice that in the example above we are chaining our array object variable name "celebrityCameo" to our .map() method. This allows our method to have access inside the array object where the keys and values live.

STEP TWO:
Next we need to figure out what exactly we need to put in between the parentheses of our .map() method. We know from the information given earlier that it will be an arrow function with a return. We know a function has a parameter that will take in an argument. The question is, what do we name that parameter? The beauty of parameters is that we can name them whatever we want. MAKE IT MAKE SENSE TO YOU AND YOUR VIEWERS! I'm going to call my parameter "price" because we are looking for the price of the celebrity's cameo.

STEP THREE:
Now that we have set up our parameter name that will take in an argument we want to set up our return. Our return comes after our =>. Remember that in a regular function we define our return by physically typing "return" in the body of our function. Because this is an arrow function we don't have to physically type return after => in our function. Our arrow function will know that our line of code after => will automatically return something back to us.

Notice yet again that we are chaining within the parentheses of our .map method. What exactly or we chaining and why? We are taking our function parameter "price" and chaining it to our key name "cameoPrice" within our celebrity objects in our array object. This allows our parameter "price" to have access to the value of the key "cameoPrice" which is the price of the celebrities cameo.

STEP FOUR:
After we correctly set up our variable with a value of our .map() method that calls our arrow function, it's time to check our work and guarantee that we have created a new array with just a list of each celebrities cameo price point. We can do this in two ways. We can console.log "prices" and have the new array appear in our browser console. Or we can also call the variable "prices" in our browser's console and have the new array appear in the console of the browser.

Using "console.log(prices)" in VSC:

The new array that should appear in the browser console using "console.log(prices)" in VSC:

The new array that should appear in the browser console when calling the variable "prices" in the console of the browser:

Putting the .map() method to use with anonymous functions!

STEP ONE:
We need to create an anonymous function that is declared by a variable, a parameter that takes in an argument that's followed by {} (brackets) to create the body of the function where we tell our function what to do. Remember to make the name of the variable declaration make sense. I'm going to name my variable "celebrityCameoPrices" because I'm looking for the cameo price of each celebrity. I then will name my parameter "price". Why I'm I naming it "price"? I think you get the point.

STEP TWO
We now need to figure out what I want my function to do. Do you remember where we tell our function what to do in an anonymous function? If you said between the brackets where the body of the function lives, great job!

Hmmm, but we're missing something here. What could it be? Remember, only arrow functions don't need a "return". Because it's an arrow function, JavaScript automatically knows to return what we're asking the function to do. Let's tweak the above code a bit.

Now that we have our "return" our function will execute what we're asking it to do when called. Notice we are chaining "price" to the key "cameoPrice" like we did with the arrow function syntax. This allows access to the value inside of the key cameoPrice.

Say if we didn't have a return within or function body? What do you think we would get in return when our function variable is called?

Take a look!

WE WOULD GET UNDEFINED!

STEP THREE:
What can we do now that our function is built out? We need to set up our .map() method to call our "function celebrityCameoPrice". We will take the same steps we did for the arrow function. Assign our .map() method to a variable name. This time however our .map() method will only have one thing in between the parentheses. That is our variable name "celebrityCameoPrices" that is now equal to our function. I bet you were wondering where our function was going to be called.

STEP FOUR:
As with arrow functions, there are to ways we can be sure our code is working. We can console.log "cPrices" and have the new array appear in our browser console. We can also call the variable "cPrices" in our browser's console and have the new array appear in the console of the browser.

Using "console.log(cPrices)" in VSC:

The new array that should appear in the browser console using "console.log(cPrices)" in VSC:

The new array that should appear in the browser console when calling the variable "cPrices" in the console of the browser:

WE DID IT!

We learned how to use the .map() method to look for specific values matched with a specific key within an array object to create a new array of just those values. Not only did you learn to do it with one function syntax, but two function syntax! Round of applause ladies and gents!

If you enjoyed this blog stay tuned for the next few blogs about other iteration methods:

.find()
.reduce()
.forEach()

Until next time, happy coding coders! 👽

Resources

1. Arrow Function Expressionslink

2. Anonymous Functionslink

3. .map() Methodlink