CODEWITHSUNDEEP
reactjs
MikkoH
MikkoH

Reputation: 105

cloneElement on childrens children

I know you can use cloneElement to modify props of children. But would it be "bad" if a parent modified childrens/children's props via clone element?

Simple example: <MasterOfVisiblity> <div> <div visibility={false}>Hello</div> <div visibility={true}>World</div> <div visibility={false}></div> </div> </MasterOfVisibility>

MasterOfVisiblity would recurse and look for the prop visibility and lets say clone the children's child and set styles

Upvotes: 1

Views: 79

Answers (2)

enjoylife
enjoylife

Reputation: 3861

I would advise against as it sounds like you want to manipulate styles. Unfortunately cloneElement doesn't merge or do anything smart with styles or classNames. docs

Related to component reuse, the farther down you recurse I imagine you will be forced to either make more assumptions on which components are children, or implement checks of some kind.

My advice is is then to follow the general convention of passing props down and have components handle what needs to happen to themselves. Maybe replace <div visibility={false}></div> with

 <div>
   <Component isVisible={true} />
</div>

Upvotes: 0

J. Mark Stevens
J. Mark Stevens

Reputation: 4945

Yes, cloneElement is for the children to modify props. The parent provides the props so doesn't need cloneElement. It just changes the props via setState.

Upvotes: 0

Related Questions