React - How to pass props to a component passed as prop

Question

I have a React component (React v15.5.4) that you can pass other components to:

class CustomForm extends React.Component {
  ...
  render() {
    return (
               


        

Answer 1

You can achieve that by using React.cloneElement.

Like this:

class CustomForm extends React.Component {
  ...
  render() {
    return (
      

          {React.cloneElement(this.props.component,{ customProps: this.props.object })}
      
    );
  }
}

Working Code:

class Parent extends React.Component{
  render() {
    return(
      } />
    )
  }
}

class Child extends React.Component{
  constructor(){
    super();
    this.state = {b: 1};
    this.updateB = this.updateB.bind(this);
  }
  
  updateB(){
    this.setState(prevState => ({b: prevState.b+1}))
  }
  
  render(){
    var Comp = this.props.comp;
    return (
      

        {React.cloneElement(Comp, {b: this.state.b})}
        Click to update b
      
    );
  }
}

const GChild = props => 
{JSON.stringify(props)}
;
 
ReactDOM.render(
  ,
  document.getElementById('container')
);