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

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

class CustomForm extends React.Component {
  ...
  render() {
    return (
      <div>
          {this.props.component}
      </div>
    );
  }
}

And I have a different component that uses it:

class SomeContainer extends React.Component {
  ...
  render() {
    let someObjectVariable = {someProperty: 'someValue'};
    return (
      <CustomForm 
         component={<SomeInnerComponent someProp={'someInnerComponentOwnProp'}/>}
         object={someObjectVariable}
      />
    );
  }
}

Everything renders fine, but I want to pass someObjectVariable prop to the child component inside CustomForm (in this case that'll be SomeInnerComponent), since in the actual code you can pass several components to it instead of just one like the example.

Mind you, I also need to pass SomeInnerComponent its own props.

Is there a way to do that?

You can achieve that by using React.cloneElement.

Like this:

class CustomForm extends React.Component {
  ...
  render() {
    return (
      <div>
          {React.cloneElement(this.props.component,{ customProps: this.props.object })}
      </div>
    );
  }
}

Working Code:

class Parent extends React.Component{
  render() {
    return(
      <Child a={1} comp={<GChild/>} />
    )
  }
}

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 (
      <div>
        {React.cloneElement(Comp, {b: this.state.b})}
        <button onClick={this.updateB}>Click to update b</button>
      </div>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='container' />

You can do in the same as you did for SomeInnerComponent.

Just pass named props.

Inside CustomForm,

render() {

  const MyComponent = this.props.component; //stored it in some variable

    return (
      <div> 
         <MyComponent customProps = {this.props.object} /> //access object here and passed it or passed individual props
      </div>
    );
  }

EDIT :

Please find the working demo here.

You have a couple of options to achieve what your asking.

class SomeContainer extends React.Component {
  ...
  render() {
   let someObjectVariable = {someProperty: 'someValue'};
    return (
      <CustomForm 
       component={<SomeInnerComponent propFromParent={someObjectVariable}/>}
       object={someObjectVariable}
      />
    );
  }

}

Or you can clone the component prop and apply the new props as Mayank said. In your case

class CustomForm extends React.Component {
  ...
  render() {
    return (
      <div>
        {React.cloneElement(this.props.component,
           {propFromParent:this.props.someObjectVariable})}
      </div>
  );
 }
}

You can use react-overrides for this. Create CustomForm:

import o from "react-overrides";

const InnerComponent = () => null; // default

class CustomForm extends React.Component {
  ...
  render() {
    return (
      <div>
          <InnerComponent {...o} />
      </div>
    );
  }
}

Pass props and component of InnerComponent at overrides prop:

class SomeContainer extends React.Component {
  ...
  render() {
    let someObjectVariable = {someProperty: 'someValue'};
    return (
      <CustomForm 
         object={someObjectVariable}
         overrides={{
             InnerComponent: {
                 component: SomeInnerComponent,
                 props: {
                     someProp: 'someInnerComponentOwnProp'
                 }
             }
         }}
      />
    );
  }
}

<TextField place={"India"}> </TextField>

and in your component TextField

class TextField extends Component {

    constructor(props){
        super(props);
    }
    
    render() {
        return (
            <div>
                <input />
                <button> {this.props.place} </button>
            </div>
        )
      }
}