React cloneElement is not working for functional component

Question

I would like to add some props to my component using {React.cloneElement(<MyComponent />, { onClick: () => console.log('click'), style: {background: 'red'} })}

Full code:

const MyComponent = () => {
  return (
    <div>
      foooo
    </div>
  );
};

....
return React.cloneElement(<MyComponent />, { onClick: () => console.log('click'), style: {background: 'red'} })

But props are not passed into my component.

When I use:

return React.cloneElement(<div>foooo</div>, { onClick: () => console.log('click'), style: {background: 'red'} })

Props are working. Why? I don`t understand why.

cloneElement passes the props to the component, but your component must accept the props as arguments, otherwise the props are not applied. See answer by @SalientBrain — kluverp, Dec 14 '22 at 13:33

Dennis Vash · Answer 1 · 2021-07-15T13:58:35.693

4

Why would you use cloneElement when you got JSX available (can conclude it from MyComponents syntax).

Instead do:

<MyComponent
  onClick={() => console.log("click")}
  style={{ background: "red" }}
/>

And fix your component:

const MyComponent = ({ style, onClick }) => {
  return <div onClick={onClick} style={style}>foooo</div>;
}

JSX is sugar syntax for createElement / cloneElement.

React.cloneElement(
  element,
  [props],
  [...children]
)

React.cloneElement() is almost equivalent to:

<element.type {...element.props} {...props}>{children}</element.type>

Therefore the right syntax:

const onClick = () => console.log('click');
const style = {background: 'red'};

// Exatcly the same effect as <MyComponent .../> above
React.cloneElement(<MyComponent/>, {onClick, style}, null);

edited Jul 15 '21 at 13:58

answered Mar 25 '20 at 08:21

Dennis Vash

50,196
9
100
118

And in sandbox we see that style is not applied. And also onClick works from original component, not from clone! WHY? – SalientBrain Jul 15 '21 at 09:18
@SalientBrain I fixed the example, just pass the style prop in `MyComponent`. Not sure about your second part of the question – Dennis Vash Jul 15 '21 at 10:45
Yes. Please check my answer. – SalientBrain Jul 15 '21 at 11:15

score 4 · Answer 2 · answered Jul 15 '21 at 11:15

You need to apply props inside you component:

export const Test = (props: any) => {
  return (<button {...props}>Click Me</button>);
}

In this case you can set props using

React.cloneElement(<MyComponent/>, props, null);

but I do not recommend cloning (it is too heavy) I think that it is better to use special render function in props:

export const Wrapper = (props: {render: (props: any) => any}) => {
    const childProps = {style: {background: 'red'}, onClick: () => { console.log('click'); }};
    if (props.render){
      return props.render(childProps);
    } else {
      return <></>;
    }
  }
// ...
// usage:
export default function App() {      
  return (
    <div className="App">      
      <Wrapper render={(props)=>{
        return <button {...props}>TEST</button>;
      }}/>      
    </div>
  );
}

React cloneElement is not working for functional component

2 Answers2