Search code examples
javascriptreactjspropertiesclone

React add new props to cloned element with spread operator

I have a container like so:

const ReactContainer = ({ children, ...rest }) => React.cloneElement(children, rest);

Now, I want to add new props - count and flag - to the cloned elements:

So I tried this:

const ReactContainer = ({ children, ...rest }) => {
    const count = 0;
    const flag = false;

    return React.cloneElement(children, {count, flag}, rest);
};

But this doesn't work and I've tried other variations. How can I add these new props to the cloned elements keeping the spread operator for simplicity?

Solution

  • Please try this:

    const ReactContainer = ({ children, ...rest }) => {
    const count = 0;
    const flag = false;

    return React.cloneElement(children, {...rest, count, flag});
};

    Please note that in above example ...rest used in component function definition acts as rest parameters syntax while in cloneElement it acts as spread syntax.