DEV Community: Mary Okafor

How to Dynamically Add Input Fields on Button Click in ReactJs

Mary Okafor — Tue, 12 Sep 2023 14:17:01 +0000

This article focuses on the topic of dynamically adding and removing input fields with a button click. This feature allows users to add more input fields as needed, enhancing the flexibility and usability of forms and data collection processes. This tutorial will guide you on how to successfully add and remove dynamic input fields from your applications.

We will be displaying two input fields and also adding two buttons to dynamically add or delete the fields.

Create A React Component

Let's start by creating a react component that will contain the input fields. You can create a new component or edit an existing one by adding the following code.

import { useState } from "react";

export default function AddDynamicInputFields() {
  const [inputs, setInputs] = useState([{ firstName: "", lastName: "" }]);

  const handleAddInput = () => {
    setInputs([...inputs, { firstName: "", lastName: "" }]);
  };

  const handleChange = (event, index) => {
    let { name, value } = event.target;
    let onChangeValue = [...inputs];
    onChangeValue[index][name] = value;
    setInputs(onChangeValue);
  };

  const handleDeleteInput = (index) => {
    const newArray = [...inputs];
    newArray.splice(index, 1);
    setInputs(newArray);
  };


  return (
    <div className="container">
      {inputs.map((item, index) => (
        <div className="input_container" key={index}>
          <input
            name="firstName"
            type="text"
            value={item.firstName}
            onChange={(event) => handleChange(event, index)}
          />
          <input
            name="lastName"
            type="text"
            value={item.lastName}
            onChange={(event) => handleChange(event, index)}
          />
          {inputs.length > 1 && (
            <button onClick={() => handleDeleteInput(index)}>Delete</button>
          )}
          {index === inputs.length - 1 && (
            <button onClick={() => handleAddInput()}>Add</button>
          )}
        </div>
      ))}

      <div className="body"> {JSON.stringify(inputs)} </div>
    </div>
  );
}

First, we initialized the inputs state variable as an array containing an object that has “firstName” and “lastName” properties, both initially set to an empty string. We would be using this state to update and manage our input field values.

We used the setInputs function to update the inputs state variable. ...inputs we used the spread operator to make a shallow copy of the inputs array, which creates a new array with the same values as the previous ones.

The handleChange function is used to update the value of a specific input field in an array of input fields based on the user’s input. It makes use of the name and value properties of the event object to identify which input fields to update and what values to assign to them. This function takes in two parameters;

Event : an event object that is triggered by a change in the input fields.
Index: An index value that represents the position of the input field in an array of input fields.

The handleDeleteInput function receives one parameter index, which represents the index of the input field to be deleted from a copy of the inputs array. Afterwards, it updates the state with the modified array.

We use the map function to iterate over the inputs array and render elements for each input field and its associated buttons. For each item in the inputs array, we create a <div className="input_container"> element containing two input fields for firstName and lastName.

 {inputs.length > 1 && (
   <button onClick={() => handleDeleteInput(index)}>Delete</button>
 )}

The conditional rendering from the code block above checks if the inputs array contains more than one input field; if it does, it displays the delete button.

{index === inputs.length - 1 && (
    <button onClick={() => handleAddInput()}>Add</button>
)}

From the code block above, the conditional rendering checks if the current “index” matches the last input field in the “inputs” array, and if it does, it displays the “add” button.

Render The Component

Next, we can render the component we created earlier, AddDynamicInputFields, in our main application file (App.js).

import AddDynamicInputFields from "./AddInputFields";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Dynamically add input fields</h1>
      <AddDynamicInputFields />
    </div>
  );
}

Styling

Your input fields and buttons can be styled using CSS or a UI framework like Tailwind CSS. Feel free to modify your styling to fit your application’s designs.

Test Your Application

Thats it! You can use “npm start” or your preferred way to start your React application. Now you can add and delete input fields dynamically.

You can find the tutorial repo in this codesandbox

Please let me know if this post was helpful by leaving a comment or reaction.

Thank you!

Simplifying Code with Event Delegation in Your Javascript Applications

Mary Okafor — Tue, 25 Apr 2023 21:02:34 +0000

One of the important features of Javascript is event handling, which allows for user interaction with web pages. As web applications become more complex, event handling can become nerve-racking. This is where event delegation comes into play as a technique to optimize event handling. In this article, we will explore the concept of event delegation, its benefits, and how to implement it in your code.

Event delegation is simply a method of handling multiple elements' events with a single event listener. Instead of adding an event listener to each element, the event listener is added to the parent element, which listens for events that are triggered by the child element.

Let's look at an example with and without event delegation.

<div class="buttons">
    <button class="button_sub">Subtract</button>
    <button class="button_reset">Reset</button>
    <button class="button_add">Add</button>
</div>

In the code above, we have three button elements. You may add the necessary click event handlers for each button to handle the click event:

let addButton = document.querySelector(.button_add)
addButton.addEventListener('click', () => {
  console.log('Add button was clicked')
})

let subtractButton = document.querySelector(.button_sub)
addButton.addEventListener('click', () => {
  console.log('Subtract button was clicked')
})

let resetButton = document.querySelector(.button_reset)
addButton.addEventListener('click', () => {
  console.log('Reset button was clicked')
})

Having numerous event handlers on a page can have a negative effect on the application, which includes:

Each event listener is a function, which is also an object that takes up memory, and having too many objects in memory can lead to increased memory usage, which can in turn slow down the application's performance.
Can make it more challenging to manage and debug your code.

with event delegation

buttons.addEventListener("click", (event) => {
  if (event.target.classList.contains('button_add')) {
    console.log('Add button was clicked')
  }
  if (event.target.classList.contains('button_sub')) {
   console.log('Subtract button was clicked')
  }
  if (event.target.classList.contains('button_reset')) {
    console.log('Reset button was clicked')
  }
});

The target property of the event object contains information about the actual element receiving the event. On event.target.classList.contains, we are checking if a specific CSS class is present on the HTML element that triggered the event.

When you click the button, the event bubbles up to the div(parent element), which handles the event.

Benefits of Event Delegation

You are able to write cleaner code, and create less event listeners with similar logic.
Less memory space, better performance.

Conclusion

To sum it all up, event delegation is an effective method that can significantly improve the performance of your web applications. While it may require some initial effort to set-up, the benefits can be substantial in the long run, especially for complex web applications.

The Pros and Cons of Monorepos

Mary Okafor — Wed, 19 Apr 2023 17:35:16 +0000

Since I started as a software developer, I have always worked with polyrepos, which used to be the standard way for me to write code. If you want to create a new project, just create a new repository, configure your CI/CD pipelines, and you are done. It is simple to manage, but not until I worked on a contract job and was introduced to a new way to organize codebases: monorepos.

Monorepo contains multiple projects in a single repository. All projects share the same codebases, dependencies and versioning system.

A polyrepo is simply the opposite of a monorepo; in a polyrepo, each project has its own repository.

Let's take a look at some advantages and disadvantages of monorepos;

Advantages of Monorepos

1. Better code sharing and reuse: With a monorepo, all code is stored in a single repository, making it easier to share and reuse code across different projects and teams. This can help reduce code duplication and improve development efficiency.

2. Simplified dependency management: Monorepos provide a centralized location for managing dependencies and versioning across different projects. This can help ensure that all code is using the same versions of dependencies and reduce conflicts.

3. Improved code consistency: With all code in a single repository, it's easier to enforce coding standards and best practices across different teams and projects. This can help ensure that code is consistent and maintainable over time.

4. Easier refactoring: Refactoring is simpler when all the code is in one repository, making it simpler to rework and restructure the code as necessary. This can aid in lowering technical debt and enhancing code quality.

Disadvantages of Monorepos

1. Git performs poorly while working on complex projects: This challenge begins to show up on large applications with more commits and numerous developers working concurrently every day over the same repository. Given that Git uses a directed acyclic graph (DAG) to describe a project's history, this becomes particularly problematic. Git performance degrades as the history gets longer and more commits are made.

2. increased learning curve and challenges of inclusivity for newer developers: for a software project to be successful, the inclusion of all developers on the team is crucial. A monorepo structure could seem intimidating to newer developers. They may be unfamiliar with a list of separate projects housed in the same repository and may not know how to make a meaningful contribution. It can also be challenging for newer developers to understand the git history in a monorepo setup.

3. Access cannot be restricted: Giving fine-grained access control to external contributors or remote teams can be difficult. You must either offer access to the entire codebase or none at all.

4. Increased build time: The build process takes significantly longer than it would if many projects were built independently since there is so much code in one place.

By having multiple projects in a single repository, monorepos can simplify code sharing, promote collaboration, and ensure consistency across development environments. However, monorepos also present challenges, such as longer build times and increased complexity, which should be carefully considered when deciding whether to adopt this approach. Understanding the pros and cons of monorepo is crucial to making an informed decision about whether it is the right approach for your software development needs.