How to Create a Render a Child Object Array in React JS

When working with React, rendering nested arrays in react js from an object can sometimes be tricky if you don’t handle the data correctly. If you’ve encountered an error and want to learn how to render child object arrays, this tutorial is for you. I’ll walk you through the error you’ve encountered and provide a working solution along with a practice functionality.

The Error Explain

If you’ve been getting the following error, you’re not alone:

Uncaught TypeError: this.state.data.map is not a function.

This error happens because you’re trying to use the .map() method on an object. The .map() method is designed to work on arrays, not objects. In your state, data is an object that contains arrays (i.e., first and second), but data itself is not an array, hence the error occurs.

The Correct Way to Render Child Arrays

The fix is simple we need to correctly iterate over the object and access the arrays inside it. Since data is an object, we can first loop through the object’s keys using Object.keys() or Object.entries(). This will allow us to access both the keys and their corresponding arrays, which can then be rendered.

Here’s an updated version of the code that works:

Correct Code

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: {
                first: ['name1', 'name2'],
                second: ['email1', 'email2']
            }
        };
    }

    render() {
        // Using Object.entries to loop through keys and values
        const listItems = Object.entries(this.state.data).map(([key, values]) => (
            <div key={key}>
                <h3>{key}</h3>
                <ul>
                    {values.map((value, index) => (
                        <li key={index}>{value}</li>
                    ))}
                </ul>
            </div>
        ));

        return <div>{listItems}</div>;
    }
}

export default App;

Explanation:

1. Accessing the Object’s Entries:
   We use Object.entries(this.state.data) to get an array of key-value pairs from the data object. For example, first and second are now accessed as pairs: ['first', ['name1', 'name2']] and ['second', ['email1', 'email2']].
2. Rendering Data:
   For each key-value pair (where the key is 'first' or 'second', and the value is the array of data), we render a <div> element that contains a <h3> showing the key (e.g., 'first' or 'second') and an unordered list <ul>. Inside the <ul>, we map over the array (values) and render each item as a list item <li>.
3. Dynamic Rendering:
   We wrap each group (like first and second) in its own <div> for clear separation. The key name is displayed in a heading (<h3>) to label each list.

Example Output

The above code will generate HTML similar to this:

<div>
  <div>
    <h3>first</h3>
    <ul>
      <li>name1</li>
      <li>name2</li>
    </ul>
  </div>
  <div>
    <h3>second</h3>
    <ul>
      <li>email1</li>
      <li>email2</li>
    </ul>
  </div>
</div>

Additional Practice Functionality

Now that we’ve rendered the object data into a template, let’s go ahead and add some practice functionality. We’ll add a button to modify the data in our state. This will help you understand how React’s state updates work and how the UI re-renders automatically.

Here’s how you can extend the functionality:

 App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: {
                first: ['name1', 'name2'],
                second: ['email1', 'email2']
            }
        };
    }

    updateData = () => {
        // Updating the state with new data
        this.setState({
            data: {
                first: ['newName1', 'newName2'],
                second: ['newEmail1', 'newEmail2']
            }
        });
    };

    render() {
        const listItems = Object.entries(this.state.data).map(([key, values]) => (
            <div key={key}>
                <h3>{key}</h3>
                <ul>
                    {values.map((value, index) => (
                        <li key={index}>{value}</li>
                    ))}
                </ul>
            </div>
        ));

        return (
            <div>
                {listItems}
                <button onClick={this.updateData}>Update Data</button>
            </div>
        );
    }
}

export default App;

New Functionality Explanation:

1. updateData Method:
   I added a method called updateData that updates the state when the button is clicked. This method uses this.setState() to replace the existing data with new values. This triggers a re-render, and the component will display the updated values.
2. Rendering the Button:
   The button <button onClick={this.updateData}>Update Data</button> allows users to trigger the state update by clicking it.
3. Dynamic Re-rendering:
   When you click the “Update Data” button, React updates the state and re-renders the component with the new data. This demonstrates how React automatically handles updates to the UI when the state changes.

Final Thoughts

By following this guide, you’ve learned how to handle and render nested arrays from an object in React. You also saw how to update the component’s state dynamically and re-render the UI when the state changes. React makes managing dynamic data like this simple once you understand the basics of working with state and how to properly iterate over objects and arrays.