Menu
Suppose I have a ReactElement that has a className, and I want to add a new class to its className, without overriding the existing className.
How am I supposed to do this?
I've tried the following but it does override the existing className:
var hello = <Hello name="World" className="base"/>;
hello = React.cloneElement(hello,{className: "text1"});
hello = React.cloneElement(hello,{className: "text2"});
However this solution works:
var hello2 = <Hello name="World" className="base"/>;
hello2 = React.cloneElement(hello2,{className: hello2.props.className + " test1"});
hello2 = React.cloneElement(hello2,{className: hello2.props.className + " test2"});
But is this safe to use ReactElement.props like that? Is it part of the public API of a ReactElement and is supposed to be kept retrocompatible in the future? I was not able to find this in the documentation.
Is there another way to achieve this?
258
To add the className prop to a component with React and TypeScript, we can add the React. HTMLAttributes type into our prop type. to set the prop type of MyComponent to MyProps & React. HTMLAttributes<HTMLDivElement> .
The React. cloneElement() function returns a copy of a specified element. Additional props and children can be passed on in the function. You would use this function when a parent component wants to add or modify the prop(s) of its children.
Explanation: The only reason behind the fact that it uses className over class is that the class is a reserved keyword in JavaScript and since we use JSX in React which itself is the extension of JavaScript, so we have to use className instead of class attribute.
The cloneElement () is one method that makes up the core React library. As the name suggests, React.cloneElement () is used to clone a React element and typically build on top of the original component. For instance, it allows you to add props and modify props.children value of a component.
This is similar to what you did in the above section, titled “Clone another React element as a prop,” but here, you’ll clone a prop using React.cloneElement(). This prop has to be a valid React element, such as <h1> or <button>. When you clone this prop, you can pass additional properties like CSS styling or an event handler.
In the next code block, a new button element created via React.cloneElement() from the Button component has two additional twists: an onClick event handler and new text. When this code is executed, the button will render with the text added via React.cloneElement() function which will read “Styled button with onClick” as seen in the image below.
Multiple options are available in your React arsenal, which likely includes storing the header text in a variable, passing this variable as a prop to a component, and rendering the text. You would probably then do this inside every component that requires this header text.
The structure of React elements is stable, see Nodes and Elements, so your approach is completely safe (and recommended).
If you do a lot of className manipulation, I recommend using the classnames module.
Your previous example would then become:
var cx = require('classnames');
React.cloneElement(hello2, {
className: cx(hello2.props.className, "test1"),
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
