React redux render component inside itself

Question

I have a Form Component and I want to render a clickable link inside the Form. When people click on that link, a subform will render in popup. Something similar like this

class Form extends React.Component{
    componentDidMount(){
       this.props.loadForm(this.props.url)
    }
    render(){
        const { subfrom, loadSubForm } = this.props;
        return(
          <form>
             <button onClick={()=>loadSubForm(url)}>Load Sub-Form</button>

             { /** Render Parent Form Here ***/ }

             { subform && <Popup><Form url={subform.url} /></Popup> }

          </form>
        )
    }
}

const mapStateToProps = (state) => {
    return{
       subform:state.getIn(["form",subform"])
    }
}
const mapDispatchToProps = (dispatch, props)  => {  
    return{
       loadForm: (route)=>{

           /** Ajax to load form **/
       }
       loadSubForm: (route) =>{
          dispatch(loadSubForm(route))
       }
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Form);

I am getting error when the subform is loaded:

loadForm function is not props of Form .

Answer 1

Thanks @Shubham, it's work. This is the solution

 class Form extends React.Component{
        componentDidMount(){
           this.props.loadForm(this.props.url)
        }
        render(){
            const { subfrom, loadSubForm } = this.props;
            let SubForm =  connect(mapStateToProps,mapDispatchToProps)(Form);

            /** If you use Redux Form **/
            SubForm =   reduxForm({})(SubForm);
            return(
              <form>
                 <button onClick={()=>loadSubForm(url)}>Load Sub-Form</button>

                 { /** Render Parent Form Here ***/ }

                 { subform && <Popup><SubForm id="suform" url={subform.url} /></Popup> }

              </form>
            )
        }
    }

    const mapStateToProps = (state,props) => {
        const formid = props.id
        return{
           subform:state.getIn(["form",formid,subform"])
        }
    }
    const mapDispatchToProps = (dispatch, props)  => {  
        const formid = props.id
        return{
           loadForm: (route)=>{

               /** Ajax to load form **/
           }
           loadSubForm: (route) =>{
              dispatch(loadSubForm(route,formid))
           }
        }
    }

   /** If you use Redux Form **/
   Form =   reduxForm({})(Form);

    export default connect(
        mapStateToProps,
        mapDispatchToProps
    )(Form);

NOTE: We need to pass Form ID into component and reducer. Otherwise, the reducer doesn't know which form to listen to and you will end up having an infinite loop.

Answer 2

To the nested component you are not passing a loadForm or loadSubForm functions, either you add a conditional check for their usage or pass them down as well

class Form extends React.Component{
    componentDidMount(){
       this.props.loadForm(this.props.url)
    }
    render(){
        const { subform, loadSubForm } = this.props;
        return(
          <form>
             <button onClick={()=>loadSubForm(url)}>Load Sub-Form</button>

             { /** Render Parent Form Here ***/ }

             { subform && <Popup><Form url={subform.url} loadForm={() => {// do something here}} loadSubForm={() => { //whatever you wanna do here}}/></Popup> }

          </form>
        )
    }
}

or

class Form extends React.Component{
    componentDidMount(){
       this.props.loadForm && this.props.loadForm(this.props.url)
    }
    render(){
        const { subform, loadSubForm } = this.props;
        return(
          <form>
             <button onClick={()=>{loadSubForm && loadSubForm(url)}}>Load Sub-Form</button>

             { /** Render Parent Form Here ***/ }

             { subform && <Popup><Form url={subform.url} /></Popup> }

          </form>
        )
    }
}