Is it bad to pass a parent component (i.e. "this") completely to a child component as a prop in React?

Question

I have a complicated Parent class that fetches data from a server and contains a whole bunch of complicated logic. I now want to render this data in multiple ways. Is there anything wrong with just passing the whole Parent object as a prop to a Child? As follows:

export class Parent extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            some_text = "Hello World"
            many many state things that may be set by fetch
            };

        this.some_method1 = this.some_method1.bind(this);
        ...
        this.some_method100 = this.some_method100.bind(this);
        }

    render(){
        if (this.props.renderas === "child1"){
            return <Child1 parent={this} />
            }
        else {
            return <Child2 parent={this} />
            }
        }
    }

export class Child1 extends React.Component {
    render(){
        return <div>{this.props.parent.state.some_text}</div>
        }
    }

export class Child2 extends React.Component {
    render(){
        return <div>{this.props.parent.state.some_other_thing}</div>
        }
    }

At first glance this seems like a great idea to me because I can easily render the data in Parent in multiple ways, and I don't have to write a lot of prop={this.state.value} lines. I tested it and it seems to work fine.

But I am suspicious because I have not found this solution anywhere online, and it feels like I'm not following the intended logic of React. Is there some reason this is considered a bad pattern, performance- or design-wise? Is there a better way to achieve the same thing?

EDIT: I have just learned about the existence of React Redux which is basically what I was after. All the data from the server and the methods to interact with it can be implemented in it, and then instead of a Parent component, I can just make the Childs use the store. That kind of solves everything, except for the fact that I now have to reimplement everything in React Redux...

Answer 1

It seems like a bad practice for some reasons: it is not intuitive, it certainly is a code smell (meaning that, although it works, it probably hides some architectural flaw) and it could cause issues with reference loops between parent and child.

You can accomplish something similar if you're able to use ES6 Spread operator, like below:

export class Parent extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      some_text = "Hello World"
    };
  }

  render(){
    if (this.props.renderas === "child1"){
      return <Child1 {...this.state} />
    } else {
      return <Child2 {...this.state} />
    }
  }
}

export class Child1 extends React.Component {
  render(){
    return <div>{this.props.some_text}</div>
  }
}

Answer 2

React allows only one-way bindings, data cannot flow in the opposite way (as would happen with two-way bindings, for example), and this has some key advantages:

• it's less error-prone, as you have more control over your data
• it's easier to debug, as you know what is coming from where
• it's more efficient, as the library already knows what the boundaries are of each part of the system