Forem: M.Ark

Classes in python

M.Ark — Fri, 10 Apr 2026 10:20:14 +0000

In the real world, the physical world is made up of material items for example wood, metal,plastic etc. We have to think of these in higher terms to as to understand. For example we think of things as chairs, tables, house etc. Same thing in the programming field,programmers deal with higher level groupings of items-objects.

In programming an object is a grouping of data and operations that can be performed on the data.
Encapsulation occurs when a user interacts with an objects at a higher level , allowing the lower level details to be hidden. This is also known as information hiding or encapsulation. Objects support abstraction by hiding entire groups of functions and variables and exposing only certain functions to a user.

Example

Abstraction simplifies our world. An oven is viewed as having a compartment for food and a knob is turned to heat the food.
People need not be concerned with an oven's internal workings. Ex: People don't reach inside to adjust the flame.
Similarly, an object has operations that a user applies. The object's internal data, and possibly other operations, are hidden from the user.

Multiple variables are frequently closely related and should be treated as one variable with multiple parts. For example, two variables called hours and minutes might be grouped together in a single variable called time. The Class keyword can be used to create a user-defined type of object containing groups of related variables and functions.

syntax

class ClassName:
# Statement-1
# Statement-2
# ...
# Statement-N

A class defines a new type that can group data and functions to form an object. The object maintains a set of attributes that determines the data and behavior of the class.
Here is an example:

class Time:
     def __init__(self):
         self.hours=0
         self.minutes = 0

From the sample code above, a programmer can the use instantiation to define anew Time class variable and access the variable attributes.
An instantiation operation is performed by "calling" the class, using parentheses like a function call as in my_time = Time().

An instantiation operation creates an instance, which is an individual object of the given class. An instantiation operation automatically calls the init method defined in the class definition.

A method is a function defined within a class. The init method, commonly known as a constructor, is responsible for setting up the initial state of the new instance. In the example above, the init method creates two new attributes, hours and minutes, and assigns default values of 0.

The init method has a single parameter, "self", that automatically references the instance being created. To create a new attribute, hours, we write an expression such as self.hours = 0 within the init method.

Example

class Time:
    def __init__(self):
        self.hours = 0
        self.minutes = 0


my_time = Time()
my_time.hours = 7
my_time.minutes = 15

print(f'{my_time.hours} hours', end=' ')
print(f'  {my_time.minutes} minutes')

The output of the code above will be 5 hours and 46 minutes.

In the code sample above, we have used instantiation to create a variable using the Time class.
In the same manner, we can create multiple instances of a class in a program, with each instance having different attribute values.

Example

class Time:
    def __init__(self):
        self.hours = 0
        self.minutes = 0


time1 = Time()  # instance called time1
time1.hours = 3
time1.minutes = 39

time2 = Time()  # a second instance called time2
time2.hours = 4
time2.minutes = 58

print(f'{time1.hours} hours and {time1.minutes} minutes')
print(f'{time2.hours} hours and {time2.minutes} minutes')

The output of the code above is 3hours and 39 minutes
4 hours and 58 minutes.

In the code above we have two instances of the Time class being instantiated. As we said initially, instantiation is done by calling the class.
We have time1 and time2 being the instances of the Time class.

React Component life cycle

M.Ark — Wed, 19 Nov 2025 07:31:15 +0000

React Component life cycle

M.Ark ・ Nov 19

#react #resources #newbie

React Component life cycle

M.Ark — Wed, 19 Nov 2025 07:07:57 +0000

Just as life has different phases involved, i.e we are born, grow and later die, React components experience phases as well. The phases which react components undergo are mounting, updating and unmounting.

Components interact with components to provide an interface for user interaction in web applications. However, a component – the building block of every UI we interact with – has a life cycle.

Lets go through the phases briefly.

1. Mounting phase

This is the first phase in a react component. We can as well say it is the birth phase of a react component. In this phase, a component instance is created and inserted into the DOM.(Document Object Model). We have 4 methods in this phase listed below and in their order.

1. constructor()

Constructor method is called in the mounting phase and before the component is mounted. When we call the constructor method, it accepts props as arguments. The constructor method serves 2 purposes:

It initializes a local state in the class component. This is done by assigning an object to this.state
The constructor method binds event handler methods
That's it for the constructor method on our mounting phase

2. static getDerivedStateFromProps()

The method listed above is invoked immediately before we render the elements in the Document Object Model.

_3. render() _

To render basically means to show.
The render() method is responsible for displaying the component on the screen.
This method is required for outputting React HTML elements. Both JavaScript and HTML are rendered through this method. What we see on our interface depends on what this render() method returns in the form of JSX.
It returns the JSX (React’s combination of HTML and JavaScript) that should appear in the UI.

4. componentDidMount()

Immediately after the React component is renderedinto the DOM tree, this method is initiated, just after the first render method is invoked. The componentDidMount()method allows you to execute user actions and other side effects once components are mounted.

This is it for our mounting phase and I hope it is clearer now.
We can now move to our second phase of the react component lifecycle.

2. Updating phase

Immediately after the mounting in the react component lifecycle has happened, the updating phase takes over. This is the where growing of the React component happens. In this phase, the commonly used method is the componentDidUpdate() method.
An update of the react component is done when we either have changes in the props or the data state.
The state is re-rendered using the render() method, and the updated state is returned to the UI.

3. Unmounting phase

Unmount is basically to detach. In this phase it is the death phase of the component lifecycle process.
In this phase, the method componentWillUnmount() is invoked immediately before the component is unmounted from the DOM.
In an example, a user accessing a user interface come in contract with buttons, forms and many more in our applications. Users tend to move from one component interaction to another and, on the whole, have a reactive experience.
At every point in the user interaction cycle, the React components are either inserted into the DOM tree or state changes, or the completion of component’s lifecycle.

In conclusion, briefly we have gone through various life cycle methods in React class components and why each of them exists in rendering React components.

See you in the next one and happy coding!!

How To Deal With Side Effects

M.Ark — Wed, 10 Jul 2024 08:29:27 +0000

Dealing with side effects in React is crucial to ensuring your components behave correctly and efficiently. React provides several hooks and lifecycle methods to handle side effects.

Certain components in React need to interact with things outside themselves. These things can be anything from querying data from a server to finding/changing the position of the component on the webpage or even sending some data to a server when necessary. This interaction with the outside world is called a side-effect.

Though we are already familiar with rendering code and adding event handlers, it is not enough for all uses, like when you want to connect to your server and fetch messages to show to a user.

Effects let you run some code to synchronize your component as necessary, on rendering or a reactive/state value change rather than on a particular event.

Similar to how we have the useState hook, React offers us a handy useEffect hook to use effects in our components.

Here's an overview of how to manage side effects in functional components using hooks and in class components using lifecycle methods:

If you run the code above, you do realize that the count in our wepage is inconsistenmt and it runs crazy, this implementation has a problem: _setInterval _is called every time the component renders, which will create multiple intervals and can cause performance issues.

This is where the useEffect hook swoops in to save us. We can wrap this calculation inside a useEffect hook to move it outside the rendering calculation. It accepts a callback function with all the calculations.

In the code above , we have added the useEffect function but the result from our page still runs crazy.

useEffect is a hook that lets us perform side effects in function components. Here, we use it to set up an interval that increments the counter every second.

The setInterval function runs the provided function (which increments counter) every 1000 milliseconds (1 second).

The return statement inside useEffect is a cleanup function that clears the interval when the component is unmounted to prevent memory leaks.

The dependency array

Effect Runs on Every Render: Without the dependency array, useEffect runs after every render.

This means that every time the component re-renders (which happens whenever the state or props change), a new interval is set up. This leads to multiple intervals being created, causing the counter to increment much faster than intended.

Fortunately, the second argument accepts an array of dependencies allowing the hook to re-render only when those dependencies are changed. So if you have a state variable and want to have some side-effect occur any time the state changes, you can use this hook and mention the state variable in the dependency array.

We pass an empty array in this example because we do not want the useEffect hook to run anytime other than the initial component render.
Here is how we pass an empty array.

In the code sample above, by including the dependency array,we ensure that the interval is set up only once when the component mounts and not on every render. However, it is crucial to add cleanup for the interval to prevent potential memory leaks or performance issues.

As seen now, our application counts seconds without being messy but we still have an issue with the counter updating twice every second though. That can be understood as a behavior caused by the React StrictMode.
In our code, every time the useEffect hook runs, a new setInterval is used. When the component is unmounted, setInterval is not stopped, it keeps incrementing. This unnecessary behavior can be prevented by clearing the interval when the component is unmounted and that is where the third part of our useEffect hook comes in - the cleanup function.

You can return a function from the callback in the useEffect hook, which will be executed each time before the next effect is run, and one final time when the component is unmounted. In this case, let us clean up the interval with a cleanup function.

In our code provided above:

useEffect is a hook that lets us perform side effects in function components. Here, it is used to set up an interval.

Inside useEffect, the setInterval function creates an interval that increments the counter state by 1 every 1000 milliseconds (1 second).

The const key = setInterval(...) line assigns the interval ID to a variable named key.

The return statement **inside useEffect is a cleanup function that clears the interval when the component **unmounts. This prevents memory leaks by ensuring that the interval is properly cleaned up.

The empty dependency array [] ensures that this effect runs only once, after the initial render of the component.

NB

By including the cleanup function inside the useEffect, we ensure that the interval is properly cleared when the component is unmounted, preventing potential memory leaks and ensuring efficient use of resources.

This is a summary of how useEffect hook:

useEffect(
  () => {
    // execute side effect
    return () => {
      // cleanup function on unmounting or re-running effect
    }
  },
  // optional dependency array
  [/* 0 or more entries */]
)

Cases where useEffect does not need to be used.

You do not need to use an effect if you are only calculating something based on the state during rendering. For a change in a component, due to a change in the props, you can calculate and set it during rendering.
You do not need effects for events. Code that runs when a component is displayed should be in effects, the rest should be in events.
You do not need an effect to reset the state based on a condition most of the time. You have learned about keys in React. Just like using a key on a list’s item, adding one to a component, based on the state on which it should be reset creates a unique version of that component for each change in the value of the state.
If you are having issues with managing your state and want to use an effect to update the state of a parent or some other non-child component, consider lifting the state. As we know, in React, the state flows in one direction, generally down the DOM. So the parents know of the data before passing it to the children. If multiple children are required to make use of a single state, it should be moved up to the parent that has all of the components that need it, instead of using escape hatches like an effect.

That has brought us to the end of our learning on useEffect in React.
In case of any questions let me know and we shall go through them one by one.

Happy hacking!

More on React States

M.Ark — Mon, 01 Jul 2024 21:01:30 +0000

This section contains a general overview of topics that you will learn in this lesson.
How to structure state.
How state updates.
Learn about controlled components.

How to structure state

Managing and structuring state effectively is by far one of the most crucial parts of building your application. If not done correctly, it can become a source of bugs and headaches. Poor state management can lead to unnecessary re-renders, complex and hard-to-debug code, and unpredictable application behavior.

The assignment items go through the topic thoroughly, but as a general rule of thumb: don’t put values in state that can be calculated using existing values, state, and/or props.

Derived state can lead to inconsistencies, especially when the derived data becomes out of sync with the source state. Instead, compute these values on-the-fly using functions or memoization techniques.

Additionally, always strive to keep state localized as much as possible. Avoid lifting state too high up the component tree unless absolutely necessary. By keeping state close to where it is used, you reduce the complexity of state management and make your components more modular and easier to test.

Another important aspect is to group related state variables together. When state variables are logically connected, it makes sense to manage them as a single unit, often using objects or arrays. This practice not only helps in organizing your state but also simplifies the process of updating multiple related state variables.

State should not be mutated

Mutating state is a no-go area in React as it leads to unpredictable results. Primitives (like numbers, strings, and booleans) are already immutable, but if you are using reference-type values, such as arrays and objects, you should never mutate them. According to the React documentation, we should treat state as if it was immutable. To change state, we should always use the state updater function, which, in the case of the example below, is the setPerson function.

## Why Not Mutate State?

Unpredictable Results:
Directly mutating state can lead to inconsistencies and bugs, as React might not recognize the changes, leading to unpredictable UI updates.
Debugging Difficulties:
Mutable state makes it harder to track changes, complicating the debugging process.
React Optimization:
React relies on immutability to optimize re-renders. Mutations can disrupt this optimization, causing performance issues.

Primitives in JavaScript, such as strings, numbers, and booleans, are inherently immutable. Assigning a new value to a state variable containing a primitive type will create a new instance of that value.
Primitives in JavaScript, such as strings, numbers, and booleans, are inherently immutable. Assigning a new value to a state variable containing a primitive type will create a new instance of that value.
Always use the state updater function provided by React to change state. For example, if you're managing a person object, use setPerson to update the state.

Here is an example:

How state updates

State updates are asynchronous. What this implies is that whenever you call the setState function, React will apply the update in the next component render. This concept can take a while to wrap your head around. With a lot of practice, you’ll get the hang of it in no time.

Remember, state variables aren’t reactive; the component is. This can be understood by the fact that calling setState re-renders the entire component instead of just changing the state variable on the fly.

Creating forms in React.

M.Ark — Fri, 21 Jun 2024 04:41:17 +0000

Handling forms in React involves managing state, handling user input, and validating the form before submission.

Contrary to some other ways of dealing with forms on the web, with React, forms are put into a state variable, and then React watches for any form-related event, with every such event updating the form’s state.

This means that React’s sort of constantly watching your form for any changes.

We are going to explore how to handle different input forms in react i.e

Text Inputs
Textarea
Checkbox
Radio Buttons
Select Dropdown

We are going to see how is handled and the state functions in react.
To handle forms in React, we are going to break down each step as follows:

-State Initialization
-Handling Input Changes
-Handling Form Submission
-Form Inputs
-Form Submission Button

Lets get into it real quick.

We are going to start with state initialization.

We are going to start by handling text inputs. We are going to use firstname, lastname and email as our examples and we go through how to implement them in react forms.

In the image shown above, we have created a useState that has a firstname, lastname and email inputs.These are text inputs that we are going to discuss as we go along. Let us see how our return statement looks like in our react form file.

The image above has the types, placeholders and names. This when the app is running, will only render input fields that does not handle any changes on the inputs added and nothing happens when the submit button is clicked.

Let us go through how we are going to handle change and how we are going to display the values.

To handle changes in the input fields and display the values when the form is submitted, we need to follow these steps:

Set up state management: We'll use state to track the values of the input fields.
Handle input changes: We'll create a function to update the state whenever an input field value changes.
Handle form submission: We'll create a function to handle the form submission, which will display the input values.

We have already created our state management as shown above.

Next, we'll create a function to handle changes to the input fields. This function will update the state with the new input values.

We have created a function named named handleChange using an arrow function syntax which can be called whenever an input field value changes.
event is an object representing the event that triggered the function (in this case, the change event of an input field).
We have used the event target, Lets go through what exactly happens or how we extract the name and the value.

const { name, value } = event.target; uses object destructuring to extract the name and value properties from event.target.
event.target refers to the HTML element that triggered the event, which is the input field in this case.
name corresponds to the name attribute of the input field, and value corresponds to its current value.

How do we continue and update the State:

setFormData({ ...formData, [name]: value }); is the line where the state is updated.
setFormData is a function provided by the useState hook to update the state (formData).

{ ...formData } uses the spread operator to create a new object that contains all the properties of the current formData object. This ensures that all existing form data are preserved.

This is an important step. Why ?

Because directly modifying the state object would break the immutability rule of React state, potentially causing unexpected behavior.

[name]: value dynamically sets the property of the new object. The square brackets
[name] is a computed property name in JavaScript.

This means that "set the property with the key equal to the value of the name variable to the value of the value variable".
For example, if name is "email" and value is "example@gmail.com", it effectively does: email: "example@gmail.com".

Combining the Two:(Using the spread operator as well as dynamic property name).

The final object looks like { ...formData, [name]: value }.

This creates a new state object with all the previous properties and updates the specific property (determined by the name attribute of the input field) with the new value.

Our form has been updated as well so as to be able to handle submit and for its components to have the required fields so that the data filled is submitted when the submit button is clicked.
Each of our input will have an input fild added 'handlechange' that will call the function mentioned above.
Our input field will each have:

onChange={handleChange}

How to Handle Form Submission

We'll create a function to handle the form submission. This function will prevent the default form submission behavior and display the input values.

This will display the data the user inputs in the field to our console.
We can perform any action after we have got the data from the form.

We have just handled text inputs, in our next tutorial, we shall cover Text area and Checkbox in react forms.

In case of any question or need for clarification, feel free to reach out to me.

Feel free to follow me on Github.
Thanks

Happy coding !

Hooks in React

M.Ark — Wed, 19 Jun 2024 05:47:04 +0000

Hooks are functions that let you use React features. All hooks are recognizable by the use prefix. For example, useState is a hook.

React Hooks are functions that let you use state and other React features in functional components.

Introduced in React 16.8, hooks provide a way to manage component logic in a more concise and reusable way compared to class components.

For now, remember that hooks have rules that we need to abide by:

Hooks can only be called from the top level of a functional component.
Hooks can’t be called from inside loops or conditions.

Commonly Used Hooks

useState: Manages state within functional components.
useEffect: Handles side effects like data fetching, subscriptions, or manually changing the DOM.
useContext: Provides a way to use React's Context API in functional components.
useReducer: Manages complex state logic and is an alternative to useState.
useRef: Accesses DOM elements directly or persists mutable values across renders.
useMemo: Memoizes expensive calculations.
useCallback: Memoizes callback functions to prevent unnecessary re-renders.
useLayoutEffect: Similar to useEffect, but it fires synchronously after all DOM mutations.
useImperativeHandle: Customizes the instance value that is exposed when using ref in parent components.

Well go through afew of the hooks.

useState: Manages state within functional components.

In the example above; 'useState' initializes state and returns an array with the current state value and a function to update it.

useEffect: Handles side effects like data fetching, subscriptions, or manually changing the DOM.

The example above is a section of the useEffect in a react file when collecting data.Here is how the whole file with the use Effectlooks like.

These are the most used hooks in react.

Lets dive and learn more on useState here.

What is state in React?

M.Ark — Sun, 16 Jun 2024 12:35:17 +0000

We write components in React, A LOT of components, and many times we want them to undergo visual changes as a result of user or computer interactions. For this purpose, a component needs to “remember” things about itself. This is where state comes in. State is a component’s memory.
Any exciting application you build is likely to change over the time the user is exploring it.

The changes could be as basic as toggling a drop down menu or as complex as fetching data from an API.

React provides primitives to manipulate the state of your apps, more specifically components, to make them dynamic. In this lesson, we will learn how to use state in React.

In React, state is a built-in object that allows components to create and manage their own data.

It is an essential concept for building dynamic and interactive user interfaces, enabling components to keep track of information that may change over time and re-render in response to these changes.

Key Characteristics of State

Mutable:
Unlike props, which are read-only, state is mutable and can be changed.
Changes to state trigger re-renders of the component to reflect the new state.
Private:
State is local to the component and cannot be directly accessed or modified by other components.
It is intended to encapsulate data that is specific to the component’s functionality.
Managed Internally:
State is managed within the component itself, often initialized in the constructor (for class components) or using hooks (for functional components).

Understanding the useState Hook in React

The useState hook is a fundamental hook in React that allows functional components to manage state. It is used to add state variables to functional components, enabling them to handle dynamic data and trigger re-renders when the state changes.

Syntax and Usage

The useState hook is called inside a functional component and returns an array with two elements:

> State Variable: The current value of the state.
> State Setter Function: A function that updates the state and triggers a re-render.

Here is the syntax for using the useState hook:

stateValue: This is the current state value.
setStateValue: This is the function used to update the state.
initialValue: This is the initial value of the state, which can be any type (string, number, array, object, etc.)

Example: Counter Component

In this example:

const [count, setCount] = useState(0); initializes a state variable count with an initial value of 0.
setCount is used to update the count state when the button is clicked.

Best Practices of the useState

Initialize State with Proper Default Values:

Ensure you initialize state with meaningful default values to avoid issues during rendering.

Avoid Complex State Logic:

If a state variable requires complex logic or computations to update, consider using the useReducer hook instead of useState.

Use Functions for State Updates Based on Previous State:

When updating state based on the previous state value, pass a function to the state setter to ensure you get the latest state.

setCount(prevCount => prevCount + 1);

Keep State Local and Manageable:

Try to keep state management as local as possible within components. For global state management, consider using state management libraries like Redux or Context API.

The useState hook is a powerful and essential tool for managing state in React functional components. By understanding and utilizing useState effectively, you can create dynamic and interactive components that respond to user input and changing data.

Knowledge check

The following questions are an opportunity to reflect on key topics in this lesson.

What is state?
What is the useState hook and how would you use it?
What happens to a component when one of its states is changed?
What are some of the rules of hooks?

Mastering React Components

M.Ark — Wed, 12 Jun 2024 13:44:57 +0000

React components are the fundamental building blocks of a React application.
React components are reusable, self-contained pieces of code that define how a portion of the user interface (UI) should appear and behave.

The beauty of React is that it allows you to break a UI (User Interface) down into independent reusable chunks, which we will refer to as components. The following picture should give you an idea of how to do that when building a very basic app.

For example, this website could be broken into the following components:

App, which represents your main application and will be the parent of all other components.
Navbar, which will be the navigation bar.
MainArticle, which will be the component that renders your main content.
NewsletterForm, which is a form that lets a user input their email to receive the weekly newsletter.

Components can be thought of as custom HTML elements that React uses to build the UI.
React breaks down its components into two types. I.e functional components and class components.
We are going to discuss each one of them one by one.

Functional components

Functional components are JavaScript functions that accept props(properties) as arguments and return React elements (JSX).
Functional components do not have their own state or lifecycle methods, but with the introduction of hooks in React 16.8, functional components can now manage state and side effects.
Here is an example of a functional requirement using props.

Class Components:

Class Components are ES6 classes that extend React.Component and must define a render method that returns React elements.
Class components can have their own state and lifecycle methods, making them more powerful than functional components (prior to hooks).

Here is an example:

React components key concepts:

1. JSX:
JSX is a syntax extension for JavaScript that looks similar to HTML and is used to describe the UI.
React components typically return JSX to define what the UI should look like.
Here is a JSX sample:

2. Props:
Props (short for properties) are read-only inputs to components. They are used to pass data from parent components to child components.
Here is a sample:

3. State:
State is a built-in object in class components (or managed via hooks in functional components) that holds data that may change over the component's lifetime.

State changes can trigger re-renders of the component.
Here is an example:

This bring us to the end of our discussion on React components.

You can follow me on GitHub: https://github.com/kibetamos

Happy hacking!

Rendering a list of elements in JSX

M.Ark — Wed, 05 Jun 2024 07:37:57 +0000

Rendering a list of elements in JSX involves iterating over an array of data and generating corresponding JSX elements for each item.
This is typically done using the .map() function in JavaScript.

Here's a step-by-step guide:

Create the Data Array: First, have an array of data that you want to render. This can be an array of objects or simple values.
Use the .map() Function: Use the .map() function to iterate over the array and return a JSX element for each item.
Key Prop: Each element in the list should have a unique key prop to help React identify which items have changed, are added, or are removed.

In the example above:

Data Array: In this example, names is an array of strings.

JSX Rendering: In the NameList functional component, the .map() function iterates over the names array.

Key Prop: The key prop is set to index in this case. Ideally, use a unique identifier from your data if available.

Here is another example with an Array of Objects:

In the example above:

Data Array: users is an array of objects, each with an id, name, and age.

JSX Rendering: In the UserList component, the .map() function iterates over the users array.

Key Prop: The key prop is set to user.id, which is a unique identifier for each user object.

Additional Considerations:

Unique Keys: Ensure the key prop is unique among siblings. Using indexes (index) can be problematic if the list is dynamic (e.g., items can be reordered or deleted).
Styling: Apply styles as needed to your rendered elements.
Componentization: For more complex list items, consider creating separate components for list items to keep your code modular and maintainable.

What challenges are you facing on JSX? Let us know and know how we can help decode.

We started this series by learning What is JSX

I hope this has helped you learn more about JSX.

Happy coding!

What is JSX?

M.Ark — Mon, 03 Jun 2024 14:26:37 +0000

JSX, or JavaScript XML, is a syntax extension for JavaScript that allows developers to write HTML-like code within JavaScript.

It's primarily used with React, a popular JavaScript library for building user interfaces. JSX makes writing React components more concise and readable by combining HTML and JavaScript in one place.

Why do we use JSX?

Declarative Syntax: JSX provides a more declarative way to define UI components compared to plain JavaScript. This makes the code easier to understand and maintain.
Component-Based Architecture: React encourages building applications as a collection of reusable components. JSX makes it easy to define these components in a way that resembles the final UI structure, making the code more intuitive.
Integration of HTML and JavaScript: With JSX, you can seamlessly integrate HTML markup and JavaScript logic within the same file, improving code readability and reducing context switching.
Performance Optimization: JSX allows React to perform optimizations like Virtual DOM diffing, which helps in efficiently updating the UI without re-rendering the entire DOM tree.
Static Type Checking: When used with tools like TypeScript or Flow, JSX enables static type checking, catching errors at compile time rather than runtime, thus enhancing code reliability.

Features of JSX

HTML-like Syntax: Write HTML tags directly in your JavaScript code.
JavaScript Expressions: Embed JavaScript expressions within curly braces {}.
Component Nesting: Easily nest components and manage the structure of your UI.

Basic Rules of JSX

Return a Single Root Element Every JSX expression must have a single root element. This means you need to wrap multiple elements in a parent element, like a div, or use React fragments.

As seen above, the return is under one div element. It acts as the root element.

Close all tags. In JSX, all tags must be closed, even the self-closing ones like

<img />

and

<input />.

As seen above the image tag has been enclosed within the div tag.

camelCase for Attributes Use camelCase for naming attributes instead of the standard HTML attribute names.

As seen in the example, we have use the attribute 'className' as opposed to the normal class used in html syntax.

Now lets move further and get to know how to render a list of elements in JSX. Rendering a list of elements in JSX

Forms In React

M.Ark — Tue, 21 May 2024 13:25:50 +0000

Handling forms in React involves managing state, handling user input, and validating the form before submission.

This means that React’s sort of constantly watching your form for any changes.

We are going to explore how to handle different input forms in react i.e

Text Inputs
Textarea
Checkbox
Radio Buttons
Select Dropdown

We are going to see how is handled and the state functions in react.
To handle forms in React, we are going to break down each step as follows:

-State Initialization
-Handling Input Changes
-Handling Form Submission
-Form Inputs
-Form Submission Button

Lets get into it real quick.

We are going to start with state initialization.

We are going to start by handling text inputs. We are going to use firstname, lastname and email as our examples and we go through how to implement them in react forms.

Let us go through how we are going to handle change and how we are going to display the values.

To handle changes in the input fields and display the values when the form is submitted, we need to follow these steps:

Set up state management: We'll use state to track the values of the input fields.
Handle input changes: We'll create a function to update the state whenever an input field value changes.
Handle form submission: We'll create a function to handle the form submission, which will display the input values.

We have already created our state management as shown above.

Next, we'll create a function to handle changes to the input fields. This function will update the state with the new input values.

const { name, value } = event.target; uses object destructuring to extract the name and value properties from event.target.
event.target refers to the HTML element that triggered the event, which is the input field in this case.
name corresponds to the name attribute of the input field, and value corresponds to its current value.

How do we continue and update the State:

setFormData({ ...formData, [name]: value }); is the line where the state is updated.
setFormData is a function provided by the useState hook to update the state (formData).

{ ...formData } uses the spread operator to create a new object that contains all the properties of the current formData object. This ensures that all existing form data are preserved.

This is an important step. Why ?

Because directly modifying the state object would break the immutability rule of React state, potentially causing unexpected behavior.

[name]: value dynamically sets the property of the new object. The square brackets
[name] is a computed property name in JavaScript.

This means that "set the property with the key equal to the value of the name variable to the value of the value variable".
For example, if name is "email" and value is "example@gmail.com", it effectively does: email: "example@gmail.com".

Combining the Two:(Using the spread operator as well as dynamic property name).

The final object looks like { ...formData, [name]: value }.

This creates a new state object with all the previous properties and updates the specific property (determined by the name attribute of the input field) with the new value.

onChange={handleChange}

How to Handle Form Submission

We'll create a function to handle the form submission. This function will prevent the default form submission behavior and display the input values.

This will display the data the user inputs in the field to our console.
We can perform any action after we have got the data from the form.

We have just handled text inputs, in our next tutorial, we shall cover Textarea and Checkbox in react forms.

In case of any question or need for clarification, feel free to reach out to me.

Feel free to follow me on Github.
Thanks

Happy coding !