How to pass props to {this.props.children}

Question

I\'m trying to find the proper way to define some components which could be used in a generic way:

Answer 1

I came to this post while researching for a similar need, but i felt cloning solution that is so popular, to be too raw and takes my focus away from the functionality.

I found an article in react documents Higher Order Components

Here is my sample:

import React from 'react';

const withForm = (ViewComponent) => {
    return (props) => {

        const myParam = "Custom param";

        return (
            <>
                

                    
this is poc form
                    

                        
                    
                
            
        )
    }
}

export default withForm;


const pocQuickView = (props) => {
    return (
        

            
this is poc quick view and it is meant to show when mouse hovers over a link
        
    )
}

export default withForm(pocQuickView);

For me i found a flexible solution in implementing the pattern of Higher Order Components.

Of course it depends on the functionality, but it is good if someone else is looking for a similar requirement, it is much better than being dependent on raw level react code like cloning.

Other pattern that i actively use is the container pattern. do read about it, there are many articles out there.