DEV Community: Parnika-Gupta

React Meets Disney: Unveiling the Magic of Hooks | The Tale of useState

Parnika-Gupta — Tue, 01 Oct 2024 04:40:01 +0000

Chapter 1: The Birth of State in Reactopia 🌟

Once upon a time in the vibrant land of Reactopia, where magical components flourished, lived a spirited girl named Emilia. Emilia had a special gift: she could breathe life into her ideas with just a touch. One day, while exploring the Enchanted Forest of Components, she stumbled upon a dazzling crystal called useState. This crystal was said to possess the power to capture and control the ever-changing nature of her creations. 💎

Chapter 2: The Crystal of useState: A Magical Tool 🪄

The useState crystal sparkled with endless potential. When Emilia grasped it, she discovered that she could conjure a state, much like a jar that could hold her favorite cookies. 🍪 Each jar had a label (the state variable) and a magic spell (the update function) to add or change the cookies inside.

const [cookieCount, setCookieCount] = useState(0);

In this incantation:

cookieCount was her cookie jar, starting with zero cookies.
setCookieCount was the magic spell to change the number of cookies whenever Emilia needed.

Chapter 3: The Use Cases of the useState Crystal 🎨

With the useState crystal, Emilia uncovered a treasure trove of possibilities. She realized that it could help her manage various states in her magical creations, like:

Managing User Input: When enchanted visitors arrived in Reactopia, Emilia could use useState to catch their names and favorite spells, like capturing fireflies in a net. 🧚‍♀️

   const [visitorName, setVisitorName] = useState('');

Toggling Elements: Emilia had a hidden treasure chest 💰 that could appear or disappear at the wave of her wand. The useState crystal allowed her to control the visibility of the chest as easily as flipping a light switch. 🔄

   const [isChestOpen, setIsChestOpen] = useState(false);

Counting Spells: Emilia loved casting spells ✨ and wanted to keep track of how many she had cast. Each time she performed magic, she could call setCookieCount to add a cookie to her jar, counting her spells with joy.

   const [spellCount, setSpellCount] = useState(0);

Chapter 4: The Benefits of the useState Magic 🌈

As Emilia delved deeper into her adventures, she discovered the remarkable benefits of the useState crystal:

Simplicity: Just like learning to ride a bike 🚴, using the useState crystal was straightforward, making it accessible for all the young wizards and witches of Reactopia.
Separation of Concerns: Each magical component had its own state, like different gardens 🌼, each with their unique flowers. This allowed Emilia to manage her creations without them getting tangled together.
Reactivity: Whenever Emilia waved her wand to change the cookie count, Reactopia would automatically adjust and show the new count, like a magical scoreboard that updated in real time. 📊

Chapter 5: When to Use the useState Crystal 🔮

Emilia learned that the useState crystal was perfect for:

Local State Management: When she needed to keep track of values that only affected a specific component, like monitoring the mood of her enchanted pets 🐾.
Form Handling: When managing user input in forms, the useState crystal could help capture the visitors’ wishes 🎈, just like collecting wishes in a wishing well.
Toggle States: For creating interactive elements like magical doors 🚪 and glowing orbs, where the state changed based on the visitors’ actions, like flipping a switch to turn on a lantern. 🔦

Chapter 6: The Journey of Growth 🚀

As Emilia mastered the useState crystal, she realized it was just the beginning of her magical journey. With each lesson, she learned to weave together the powers of useState with other crystals like useEffect and useReducer, enhancing her ability to create more complex and captivating spells in her creations. 🌌

Conclusion: The Magic of useState 🌟

In the enchanting realm of Reactopia, Emilia discovered that the useState hook was a powerful ally in her quest to craft interactive and engaging applications. With its simplicity, flexibility, and reactivity, the useState crystal allowed her to bring her wildest dreams to life, delighting all who wandered into her magical world. 🧙‍♀️

And so, Emilia continued her enchanting adventures, spreading the magic of React one state at a time, teaching others the wonders of her creations.

The End 🎉

JavaScript Array Methods made easy : array.filter() (Part 1)

Parnika-Gupta — Thu, 12 Aug 2021 15:12:33 +0000

What is an Array?
An array is a variable that allows us to hold multiple values at a time. In normal situations we use variables to store single values:

let item1 = “Milk”;
let item2 = “Butter”;
let item3 = “Bread”;

But who’s grocery list is ever that small? And what if it’s not a grocery list with limited items but a list of transactions made by your bank account and you want to search for one particular transaction among hundreds? It would not be feasible to assign a designated variable for each transaction and then iterate over them when required.
Whether you want to make a grocery list, or need to list down things to do in a day, an array is your answer!

const arrayName =[item1, item2, item3, …]; //Creating an Array
const grocery = [“Milk”, “Butter”, “Bread”]; //Array of grocery items

Array Methods
JavaScript provides multiple methods that make functioning with arrays easier. Here are a few that you will surely find yourself using quite often.
Here is an example of an Array that we will be using to understand the array methods:

const items =[
{name: "Milk", price: 30},
{name: "Butter", price: 250},
{name: "Bread", price: 25},
{name: "Curd", price: 35},
{name: "Juice", price: 20},
{name: "Eggs", price: 40},
{name: "Biscuits", price: 10}
]

filter()
The filter() method filters an array based on a test function and returns the resultant array. In simpler terms, it takes in an array, passes the elements of the array through a function, and only returns an array of the elements that return true.

Note:

filter() doesn’t work for empty array items
filter() doesn’t change the initial array

Syntax

array.filter(function(currentValue, index, arr), thisValue)

Parameters (* represents required parameters)
function*: Callback function, tests each element in an array. Returns true to keep the element and false to skip the element. It further takes 3 arguments:
currentValue*: Value of current element
index: Index of the current element
arr: Array object the current element belongs to
thisValue: Value to be used as “this” when executing the function. If the parameter is empty, “undefined” is passed as “this” value.

const filteredItems = items.filter((item) => {
return item.price < 35; 
})
console.log(filteredItems);

Output : filteredItems Array

(4) [{…}, {…}, {…}, {…}]
0: {name: "Milk", price: 30}
1: {name: "Bread", price: 25}
2: {name: "Juice", price: 20}
3: {name: "Biscuits", price: 10}
length: 4
[[Prototype]]: Array(0)

Looks like it worked! All the items that did not have price under 35 are not included in our filteredItems array.
Now let’s see if there is any change to our items array!

console.log(items);

Output : items array

(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {name: "Milk", price: 30}
1: {name: "Butter", price: 250}
2: {name: "Bread", price: 25}
3: {name: "Curd", price: 35}
4: {name: "Juice", price: 20}
5: {name: "Eggs", price: 40}
6: {name: "Biscuits", price: 10}
length: 7
[[Prototype]]: Array(0)

Our items array is just as it was in the beginning.
This was about the filter() array method. Here is a little illustration I made to help you understand it better.

If you want to learn more about filter() method, here are a few references:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
https://www.youtube.com/watch?v=0qsFDFC2oEE
https://www.digitalocean.com/community/tutorials/js-filter-array-method

Understand One-way Data Binding in React the easy way!

Parnika-Gupta — Mon, 09 Aug 2021 22:07:40 +0000

React is a popular JavaScript library for many reasons and one of the reasons is “one-way data binding”. If you want to understand React to its core, you should read along.

It’s a one-way road for the data

React apps are made up of carefully organized components. These components receive arguments(props) and return information using the return value of the render function. When data flows from the parent to the child component, it is known as the unidirectional flow of data.

Parent component passes information to child component using props. But it is also possible that a child component might end up requiring to change something in the UI. What to do in that case?

Is it possible to pass data from the child to parent component?

What if clicking a button in the child component changes the text in the parent component? How do we make sure that the parent component is aware that a button is clicked that is supposed to change its text?

This is achieved by the parent component by passing a callback function as a prop when calling the child component. The child component now calls this function when the button is clicked. This provides the parent component with all the required information about the state of the child component or the user actions.

Example

Before anything else, it is essential to understand which UI component should be changed based on the user input. This is where the concept of “state” comes in.

As we already discussed, we need to change the text in the parent component that is currently “Hello” to “World”. So, that is our element of the state.

Now, which component should the state live in? The child? The parent? Um.. so here are a few steps that would make it easier for you to decide where the state should reside:

See which component renders something based on the state.
Identify the highest component in the hierarchy that relies on the state.
The state lives in either the highest component in the hierarchy or some other higher component.
If you are unable to find a component worthy of owning the state, you can create a completely new component whose whole purpose is to hold the state. Then you can add this component as the highest component in the hierarchy.

In our case, it is easy to identify that the state should reside in the “Parent” component.

const [text, setText] = useState(“Hello”);

Now, what do we do to the “Parent” component? We pass the callback function as a prop from the parent component.

<Child changeText={(text) => setText(text)} />

Now we need a callback function in the “Child” component that is triggered when the button is clicked.

<button onClick={() => props.changeText(“World”)}>

With all individual elements in place, here is what the JavaScript files look for each component:

Parent.js

import React, { useState } from “react”;
import Child from “./Child”;
function Parent(props) {
const [text, setText] = useState(“Hello”);
return (
<div>
<h1>{text}</h1>
<Child changeText={(text) => setText(text)} />
</div>
);
}
export default Parent;

Child.js

import React from “react”;
function Child(props) {
return (
<div>
<button onClick={() => props.changeText(“World”)}>
Change the text
</button>
</div>
);
}
export default Child;

App.js

import Parent from “./Parent”;
function App() {
return (
<>
<div className=”App”>
<Parent />
</div>
</>
);
}
export default App;

How does it work?

In the “Parent” component, the content inside the heading tag is supposed to change, initially, it is set to “Hello”. Now when the button(in the child component) is clicked, it triggers the onClick event listener that calls the callback function passed from the “Parent” to the “Child” component, which changes the text to “World” and re-renders the component.

Conclusion

React follows the unidirectional approach, meaning that data flows from parent to child and not vice versa but if you really need to manipulate your parent component based on something in the child component, you can use a callback function and pass it as a prop from the parent to child.

This function updates the state in the parent component and once the state is changed, it passes down as props again. This allows the components to re-render and display the required results.

Here I explained passing data from child to parent component using functional components, the same can be achieved using class components as well.