React.js render subcomponents from component

Question

I want to create a reusable component where the DOM structure can be different each time the component is rendered. Let's say I have this

class Comp extends React.Component {
    constructor() {
        super()
        this.state = {
            click: null,
        }
    }
    render() {
        return(
            <div>
                {this.props.chidren}
            </div>
        )
    }
    handleButton1() {
        this.setState({click: 'button1'});
    }
    handleButton2() {
        this.setState({click: 'button2'});
    }
}
class SubComp1 extends React.Component {
    render() {
        return(
            <button onClick={() => this.props.handleButton1()}>Button 1</button>
        )
    }
}
class SubComp2 extends React.Component {
    render() {
        return (
            <button onClick={() => this.props.handleButton2()}>Button 2</button>
        )
    }
}
ReactDOM.render((
<Comp>
    <div id="somediv">
        <div id="andanother">
            <SubComp1 />
        </div>
    </div>
    <div id="andanotherother">
        <SubComp2 />
    </div>
</Comp>), document.getElementById('app'))

Currently, the two subcomponents do not have access to their respective handler functions. What's the best way of passing the functions handleButton1 and handleButton2 to the subcomponents assuming that their position in the DOM is dynamic and might change depending on the layout of the page. I have thought of 2 solutions so far:

Iterating inside the props.children until I find the element of interest then clone it with the property
Using ref and somehow render the subcomponents after the main component has been rendered through the componentDidMount callback.

What are your thoughts on this?

Could you highlight your problem?

divine
– divine

2017-07-12 20:50:02 +00:00
Commented Jul 12, 2017 at 20:50 — divine
– divine, Commented Jul 12, 2017 at 20:50

lleaff · Accepted Answer · 2017-07-12 21:45:36Z

2

This is a place where using React's Context would be the most straightforward solution.

Another solution would be to use Redux actions, but that would make your component less reusable and more tightly coupled with your application, which you may or may not care about.

answered Jul 12, 2017 at 21:45

lleaff

4,31920 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

lleaff Over a year ago

(The first example in the linked React Context documentation should tell you enough about how to go about implementing it)

Binyuan Sun Over a year ago

Thanks! This looks like a working solution. I'll try it and get back to you.

Binyuan Sun Over a year ago

It worked perfectly! I also figured out another solution involving passing the instance of the components to the subcomponents but it required some trick. This worked exactly as expected, thanks!

lleaff Over a year ago

@BinyuanSun Glad to know that

enzoborgfrantz · Accepted Answer · 2017-07-12 20:48:59Z

2

Why not do something like this:

class Comp extends React.Component {
    constructor() {
        super()
        this.state = {
            click: null,
        }
    }
    render() {
        return(
            <div>
                {this.props.chidren}
            </div>
        )
    }
    handleButton(button) {
        this.setState({click: button});
    }
}

Then in the subcomponents you can do something like

class SubComp1 extends React.Component {
    render() {
        return(
            <button onClick={() => this.props.handleButton('button1')}>Button 1</button>
        )
    }
}

class SubComp2 extends React.Component {
    render() {
        return (
            <button onClick={() => this.props.handleButton('button2')}>Button 2</button>
        )
    }
}

answered Jul 12, 2017 at 20:48

enzoborgfrantz

4683 silver badges11 bronze badges

3 Comments

Binyuan Sun Over a year ago

By doing that, does the subcomponents have access to the this.props.handleButton from the parent?

enzoborgfrantz Over a year ago

I misunderstood your question, in that case using React.cloneElement with the appropriate props seems like a good option.

Binyuan Sun Over a year ago

But the problem would be that it might have to loop through it a lot before finding the desirable element, depending on the level of nesting.

enzoborgfrantz · Accepted Answer · 2017-07-12 21:40:11Z

1

One Alternative option which might fit your needs is to build a higher order component, which decorates another component with some additional functionality, below is a quick example of how this may work for you,

The higher order component:

const Comp = ComposedComponent =>
  class Comp extends React.Component {
    constructor(props) {
        super(props)
        this.handleButton = this.handleButton.bind(this);
        this.state = {
            click: null,
        }
    }

    handleButton(button) {
      this.setState({click: button}); 
    }

    render() {
        return(
            <ComposedComponent
              onClick={this.handleButton}
            />
        )
    }
  }

  export default Comp;

The child component:

class SubComp1 extends React.Component {
    render() {
        return(
            <button onClick={() => this.props.onClick('button1')}>Button 1</button>
        )
    }
}

How to use it:

const ExtendedComp = Comp(SubComp1);

<ExtendedComp />

would this be suitable for your task?

answered Jul 12, 2017 at 21:40

enzoborgfrantz

4683 silver badges11 bronze badges

2 Comments

Binyuan Sun Over a year ago

If I was to do const ExtendedComp1 = Comp(SubComp1); and const ExtendedComp2 = Comp(SubComp2);, would they be modifying the same state.click?

enzoborgfrantz Over a year ago

No because they are separate instances, the higher order component simply takes a component as a parameter and extends its functionality. Generally the state in react should be related to the ui, and if you intend on having many different components accessing a global state throughout your application maybe you should consider using a state management library such as redux or mobX

Collectives™ on Stack Overflow

React.js render subcomponents from component

3 Answers 3

4 Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related