React: adding props to an existing component
I'm trying to figure out how to clone an existing element with additional props.
For reference:
this.mainContent = <Hello message="Hello world!" />
I attempted to do something like
React.createElement(this.mainContent, Object.assign({},
this.mainContent.props, { anotherMessage: "nice to meet ya!" }));
but it's not working.
How would I accomplish this?
Solution 1:
You need to clone the element and add the additional props using React.cloneElement
e.g:
const ClonedElementWithMoreProps = React.cloneElement(
this.mainContent,
{ anotherMessage: "nice to meet ya!" }
);
// now render the new cloned element?
Solution 2:
If you don't want to use React.cloneElement()
, you can use the following snippet:
function AddExtraProps(Component, extraProps) {
return <Component.type {...Component.props} {...extraProps} />;
}
Solution 3:
React.createElement()
takes either a string or a React class type as its first parameter, so that won't work if you're trying to clone an element.
Of course, there's React.cloneElement()
instead, which does a deep copy of another React element and can optionally provide new props.
var foo = React.cloneElement(this.mainContent, {anotherMessage: "nice to meet ya!"});
Should work.