Understanding Object.fromEntries() in JavaScript. A Practical Guide with React

JavaScript has introduced many helpful methods over the years to make coding more efficient, and one such method is Object.fromEntries(). This powerful tool can transform a list of key-value pairs into an object, which can be particularly handy in web development. In this blog post, we’ll explore what Object.fromEntries() does, how it works, and provide a practical example using ReactJS to handle form submissions.

What is Object.fromEntries()?

Object.fromEntries() is a method that converts an iterable (like an array) of key-value pairs into an object. This is the opposite of Object.entries(), which takes an object and returns an array of its key-value pairs.

Syntax:

Object.fromEntries(iterable);

• iterable: An iterable (like an array) of key-value pairs (e.g., [[key1, value1], [key2, value2]]).

Return Value:

• A new object created from the provided key-value pairs.

To learn more, check out the official documentation on MDN Web Docs.

Why Use Object.fromEntries()?

Object.fromEntries() is useful when you need to create an object from a list of key-value pairs. This could come in handy in several scenarios, such as:

• Converting query parameters or form data into an object.
• Manipulating data that comes in as a map or an array of key-value pairs.
• Reversing the effects of Object.entries().

Example with ReactJS: Handling Form Submission

Let’s look at a practical example using ReactJS. When working with forms in React, you might need to gather all the form data upon submission. Object.fromEntries() can make this task simpler and more readable.

Scenario: Handling Form Data with Object.fromEntries()

Imagine you have a form with multiple fields, and you want to collect all the input data into an object when the form is submitted. You can use Object.fromEntries() in combination with event.target to achieve this.

Here’s how you can do it:

Step-by-Step Implementation:

import React from 'react';

function App() {
  const handleSubmit = (event) => {
    event.preventDefault(); // Prevent the default form submission behavior

    // Create a new FormData object from the form
    const formData = new FormData(event.target);

    // Convert the FormData object to an array of key-value pairs
    const formEntries = Array.from(formData.entries());

    // Use Object.fromEntries() to convert the array of key-value pairs into an object
    const formObject = Object.fromEntries(formEntries);

    // Log the form object to the console
    console.log(formObject);
    // You can now use formObject to handle the form data
    /*
    Example output:
    {
      name: 'John Doe',
      email: 'john.doe@demo.com',
      age: 30
    }
    */
  };

  return (
    <div>
      <h1>React Form Handling with Object.fromEntries()</h1>
      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input type="text" name="name" required />
        </label>
        <br />
        <label>
          Email:
          <input type="email" name="email" required />
        </label>
        <br />
        <label>
          Age:
          <input type="number" name="age" />
        </label>
        <br />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;

Explanation:

1. Create a FormData Object:
   When the form is submitted, the handleSubmit function is called. event.preventDefault() is used to prevent the default form submission behavior, allowing us to handle the data in JavaScript.

2. Extract Form Data as Key-Value Pairs:
   A FormData object is created from event.target, which is a reference to the form element. This object automatically gathers all form fields with their names and values.

3. Convert FormData to an Array:
   We use Array.from(formData.entries()) to convert the FormData object into an array of key-value pairs. Each entry in the array represents a form field’s name and its value.

4. Transform into an Object with Object.fromEntries():
   Finally, Object.fromEntries(formEntries) is used to transform the array of key-value pairs into a plain JavaScript object. This object (formObject) contains all the form data in a structured, easy-to-use format.

5. Use the Form Object:
   The formObject is now ready to be used for any further processing, such as sending it to a server or updating the state in your application.

Benefits of Using Object.fromEntries() in React

• Simplicity: Using Object.fromEntries() makes your code shorter and easier to read compared to manually creating an object from form data.
• Efficiency: It’s a built-in method that leverages the native capabilities of JavaScript, making it performant.
• Flexibility: Works with any iterable of key-value pairs, not just form data, providing a versatile tool for many different use cases.

Conclusion

Object.fromEntries() is a powerful addition to JavaScript that simplifies the process of creating objects from key-value pairs. In React, it’s particularly useful for handling form submissions, as it allows you to quickly convert form data into an object for further processing.

Next time you work with forms or any key-value pair data, consider using Object.fromEntries() to streamline your code and enhance readability. For more details, refer to the MDN Web Docs.

Happy coding! 🎉