DOM Manipulation Helpers
As mentioned beforehand, there are two functions in particular that we usually use together with Refs to gain full access and manipulate the DOM even outside our React applications' scope. These utilities are createPortal
and cloneElement
. The former is provided by the React DOM package and the latter comes bundled with React itself.
The cloneElement function in React
Whenever we want to change a given React component's immutable attributes – for example, its passed props – we can fall back to React.cloneElement
and create a copy of this particular component and change it as we wish.
The function's signature is very similar to the fundamental element of React React.createElement
. However, instead of passing type
as the first parameter, we pass an element
, such as a component. The return value is the same as returned by createElement
which is basically a React element. cloneElement
can be defined as:
React.cloneElement...