Can't push React component into an array

Question

I'm having an issue pushing a component into an array with React, code as follows:

import React, { useState } from 'react';
import NewPageSidebar from '../NewPageSidebar/NewPageSidebar';
import NewPageContent from '../NewPageContent/NewPageContent';
import TextBlock from '../TextBlock/TextBlock';

const NewPage = () => {
    const [blocks, setBlocks] = useState([]);

    const textButtonHandler = () => {
        const key = blocks.length;
        let array = blocks;
        array.push(<TextBlock key={key} />);
        setBlocks(array);
        // This works
        // setBlocks(<TextBlock key={key} />);
    };


    const imageButtonHandler = () => {
    };
    const spacingButtonHandler = () => {
    };

    return (
        <div className="d-flex">
            <NewPageSidebar
                textButtonHandler={textButtonHandler}
                imageButtonHandler={imageButtonHandler}
                spacingButtonHandler={spacingButtonHandler}
            />
            <NewPageContent blocks={blocks} />
        </div>
    );
};

export default NewPage;

For some reason setting an array directly setBlocks(<TextBlock key={key} />); works but the push doesn't. What am I doing wrong here?

Post your NewPageContent code, That's where the problem is. while doing setBlock directly you are not sending it as array you are passing it as single component. The NewPageContent component works only for single component and not for array. — Jagan
– Jagan, Commented Jun 21, 2020 at 14:22

Hassaan Tauqir · Accepted Answer · 2020-06-21 14:18:19Z

4

The problem here is not that the component is failing to get added to the array. The problem is the way it is being added.

According to the docs. You should not mutate the state directly. Since state is a mutating operation, the state is getting mutated, and hence the re-render may not work.

Always create a new array and then merge the old part and the new part together.

const textButtonHandler = () => {
    const key = blocks.length;
    // This should work
    setBlocks([...blocks, <TextBlock key={key} />]);
    // Code below should also work, because concat does not mutate original state
    // const array = blocks;
    // array.concat(<TextBlock key={key} />);
    // setBlocks(array);
};

answered Jun 21, 2020 at 14:18

Hassaan Tauqir

2,7521 gold badge16 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kex Over a year ago

I forgot about this mutation rule on the state. Thanks!

RIYAJ KHAN · Accepted Answer · 2020-06-21 14:34:01Z

2

React state management use shallow comparison. Based on comparison, it update state and re-render the component. If reference is same, no rendering will happen.

let array = blocks; //It create reference to array block.

//Even we pushing element in array, we not mutating the state blocks

array.push(<TextBlock key={key} />);  // still array and block having same reference

setBlocks(array); // this will passed the same array reference

As reference is same, there is no mutation.So,no state update and so no re-rendering.

To make it work, do following changes.

instead setBlocks(array); use setBlocks([...array]);

OR

let array = [...blocks];

edited Jun 21, 2020 at 14:34

answered Jun 21, 2020 at 14:24

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Collectives™ on Stack Overflow

Can't push React component into an array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related