DEV Community: JulianneHuynh

useContext in React JS

JulianneHuynh — Thu, 16 Feb 2023 17:56:34 +0000

Normally, you would manually pass state down as a prop from a parent component to each child component. However, passing the prop down would become tedious if the child component had nested components. To solve this issue, you can use the useContext hook in React, which provides state from a parent component to the child component, no matter how deeply nested it may be. To use useContext, you first create a context object using the createContext function, where the initial value is used as an argument. The context object has two parts: the provider, which wraps around the code that requires access to that information in the context, and a value set to the context used. In the child component, you can import the value prop using value = useContext(xContext). All components wrapped within the provider will have access to the value prop.

Routing with Rails

JulianneHuynh — Thu, 26 Jan 2023 07:02:00 +0000

Routing:
When you go out to a restaurant you place an order with your waiter, your waiter then puts that order in, and the kitchen prepares your order. Once the kitchen is done preparing your order, the waiter brings your order to you. This concept applies similarly when a client utilizes the internet. A client makes a request to the server(backend) and the server returns data back to the client(frontend).

Routing with Rails:
Ruby on rails allows programmers to use the 7 different routes to execute the different action methods mapped to the object within the app>controllers.rb. Custom routing are created in config>routes.rb where resources also are used.

Custom Routing:

When a client puts a request into the application for '/lawyers/:id', the request fetches the custom method of lawyer in the app>controller>users_controller.rb.

Here, user is set to a variable and active record rescue_from is used as our error handling when .find is used. To check if the routing was successfully created use Postman to test route:

Custom Route Works!!!

Making Asynchronous Requests with Promise and Await Functions

JulianneHuynh — Sun, 11 Dec 2022 00:30:26 +0000

The promise method was introduced before the await method to make an asynchronous request for fetching data. It handles asynchronous requests with an initial state that needs time to process to return a value. When the request is done pending, it will either return a fulfilled value or an error causing an incomplete operation.

In this example, the declared terms state variable is passed to the useEffect hook which then becomes the effect that makes the asynchronous request. The callback function is called on once by including an empty dependency array. If the array was not included the function would constantly render. The fetchPromise variable is given a function using an axios request library. This will make an asynchronous request to the JSON. The .then method is used to obtain the data that responds in objects with key.values . A catch block can be used to identify any errors along the way.

When promises begin to accumulate it becomes difficult to follow. The async function is more organized and basically the same code as the promise method. The await keyword is used to wait for the promise to be processed first before proceeding. JavaScript requires that the await method can only be used within an async() function. To catch errors, wrap the entire function with a try-catch block. Utilizing the async/await, it's an easier and cleaner way for syntax to flow.

Randomizing Array Elements

JulianneHuynh — Mon, 21 Nov 2022 14:14:30 +0000

If the Math.random() function didn't work for you it's okay. As a newbie to coding, it took me over a day for it to work it's magic. There are a number of ways to create a random return but I found this to be the cleanest way that made the most sense. The syntax behind this code may seem a little dauting but once you break it down it's much simpler than you think.

Here we have an array of dog names. In order to randomize the dogs' names the function was called on the array, dogs. The function Math.floor(), essentially rounds down an integer, but since these are names it won't return just a quarter of the name. To generate a random return of an element of the array Math.random() is multiplied to the length of the array, array.length. The length covers the entirety of the array of all the elements.