CODEWITHSUNDEEP
javascriptreactjs
mdmb
mdmb

Reputation: 5293

React clone/create Element

I have a library (antUI) when I can pass a component inside a configuration like this:

const configuration = [{
  render: record => <Component record={record} />
}]

I want to modify that configuration using .map function:

const additionalProps = { someProp: 'value' };
configuration.map(el => ({
    render: el.render, // React.cloneElement? React.createElement?
}));

so I can pass additional prop to the Component. Is there a way to do this? I've been trying with React.cloneElement and React.createElement but got nothing but errors.

Upvotes: 1

Views: 438

Answers (2)

trixn
trixn

Reputation: 16354

Can't you just pass them to the component ?

const additionalProps = { someProp: 'value' };
const configuration = [{
    render: record => <Component record={record} {...additionalProps} />
}]

Upvotes: 0

mdmb
mdmb

Reputation: 5293

Good God, I was adding () at the end of my code unnecessarily.

It should look like:

const additionalProps = { someProp: 'value' };
configuration.map((el) => {
    const copy = { ...el };
    return {
        ...el,
        render: record => React.cloneElement(copy.render(record), additionalProps),
    };
});

Upvotes: 1

Related Questions