Forem: Etamar

useParams in react-router-dom

Etamar — Sat, 06 Nov 2021 21:56:57 +0000

There is a big issue with a "PATCH" request for beginner developers (at least in my beginner perspective :) ).
I was working on an app that you can add a dog to the DB and also update it ("PATCH"), To grab the id from that specific "dog" and update it gave me some trouble, I tried to pass hooks as props in all kinds of ways but with no luck.

I didn’t know how strong and useful "params" can be, But when I looked for other ways to get the id from the specific "dog" I saw that there is this beautiful "react-router-dom" hook called "useParams" that makes things pretty simple.

So instead of passing hooks from one component to another component to another component (which didn’t even work) I used the "useParams" method like this...

The steps

In the parent component where i render the "EditDog" component i gave it a RESTful route:

Then I import "useParam" hook from "react-router-dom":

Then I grabbed only the :id from the params and just passed it in the Fetch request:

And there you go, A simple way to grab the id param from the object, It helped me a lot compare the other ways I tried to grab the id and I hope it will help you to.

Happy coding :)

CSS hover & active & some tips

Etamar — Wed, 08 Sep 2021 23:53:14 +0000

Lets start and say CSS is an endless world of styling.
There is a serious amount of options that you can play with to get the styling that you want for your component/element,
I am not going to tell you about everything but I will tell you about the struggle that I had in my last project and how I managed to find the solution for it.

Name the class

I had a lot of struggle grabbing the specific element using the CSS file in my project so what do you see now is the final result of endless tryouts of naming the right element.
(I know using ID for the elements can be more specific but with React I find it easier with classNames).
Don’t think i did all this styling by myself, Google was a good friend and there was a lot of coping and pasting.

Devtools

I think the most fun part with CSS is that you can play with the DOM without changing your code and have all experiments that you want until you have the final product and just copy and past it in your VScode.

hover & active

The big struggle that I had in my project (with styling) was that the button component that I was using from "MaterialUI"
was refusing to work with my simple onChange event,
So I decided to create the button on my own and do all the styling by myself.

I discovered how fun it can be with the "hover" & "active" selectors!
I managed to create a really nice Remove button that his color is fading and it has a click effect when you click it.

No doubt that i copied and paste a lot of it but there was a lot of playing around with it and i am very happy with the final result :)

resources

https://www.w3schools.com/css/css3_buttons.asp
https://www.w3schools.com/csSref/sel_hover.asp

Filter array with multiple conditions

Etamar — Mon, 12 Jul 2021 21:57:47 +0000

Ive been working on my first "React" project and this project I build is a "Park Browser" which is basically an app that helps you search for a specific national park in USA either by address, city or state.

It was really hard to understand how can I filter through an array with multiple conditions and also pass those conditions from a child component to parent.
Of course I googled it right away and I found it on "stackoverflow" (credit to Narendra Jadhav from stackoverflow).

Parent:

Child:

It seemed like its working but there was another problem,
If you searched for a park by one of the conditions it worked but if you wanted to use another condition or use a different one it will not change the search, Until i found the "continue" method in JS.

It is pretty simple what the "continue" method does,
If there are no filters to filter "continue" to the next "if" statement that will show me the parks that I am looking for by filter and if there are no results just return and empty search.

It helped me a-lot with understanding how to pass data from child to parent and how to use multiple conditions to filter and array.

I hope this post helped you with your errors,
Good Luck!

"Globally" speaking

Etamar — Sat, 15 May 2021 22:31:00 +0000

Only after I finished my first JavaScript project for school I realize that I need to use Global Variables as less as possible.
Think about it, You have a pretty good file of code that you really want to keep tight and clean with a lot of functions that uses the same element more than once, So you the first thing that came to my head as beginner is to grab all the elements that are being used more than once and put them all at the beginning of the page stacked in a nice section.

So I guess I was wrong, I noticed that having so many Global Variables is not that good for two reasons..
The first reason is pretty simple, My cohort leader told me so :)
The second reason is that I noticed it is better to grab the elements individually in each function its being used.

There is a tricky part to this way of thinking,
I think that using Global Variables is very good but my recommendation of using it will be that is to check how many times you using a certain Variable for example...
If you using an element just a couple of times in my opinion it should not be in the global scope because you want to keep you Global Variables bank tight and efficient as much as possible.
But if you using a specific element A-LOT (let’s say at least 4-5 times) that is when it should be in the Global Variables bank.
Also we need to be carful because it is very easy to overwrite a window element or a function when we use Global Variables.

I hope this post help you choose the right way of using Global Variables,
Good luck with your code.

What made me choose to be a Software engineer .

Etamar — Mon, 29 Mar 2021 00:14:42 +0000

After some bad choices I made in my short life, I think I finally made a good one :).
I always had a pretty quick idea of how to use computers but never did anything with it.
I guess I needed to try some other things first in the past 20 something years, like being a bartender, a cook, a court house type writer and many more...

It was always fascinating to see how developers communicated with their computers and how they solved problems with it, so I said to myself many times that I want and I can do it.

In the beginning of 2020 a world pandemic bursted into our lives without knocking and it just sat in our living room without asking (so to speak). So, as this pandemic forced me to sit in my living room with her for quite a while, I started to think about "Web Development" more and more. Finally, after a friend from El Salvador, long time web developer, called me I decided it was time.
After my friend made me try it (and when I say "made me" it only took him about 5 seconds) I went on "Codecademy". I took the Web developer path and guess what, I fell in love with it right away.

The "Web developer" path started beautifully!
HTML, CSS I got this!
And then I met the almighty JavaScript and I was terrified!
All those commands and syntax got me really scared and I almost gave up but I also had this big urge to crack it and understand it.

I started to google some courses about JavaScript and then I saw all those schools who do "Coding bootcamps" and I started to get interested. All of a sudden I realized that as much as web development it's fun, I wanna solve those big problems even more!
So I signed up to "Flatiron school" to become a Software engineer and so far I'm very happy with my choice.
And here I am, writing my first blog post about it and it's just the beginning!

So good luck to me! 💪🏼😊