React.js - How to implement a function in a child component to unmount another child from the same parent, and mount another component on it's place?

Question

For example, a component like this:

import React, { Component } from 'react';
import BodyContent from './BodyContent';
import BottomOne from './BottomOne';
import BottomTwo from './BottomTwo';
class App extends Component {
  render() {
    return (
      <div className="App">
        <BodyContent />
        <BottomOne />
      </div>
    );
  }
}

export default App;

I want to implement a function on BodyContent that unmount BottomOne and mounts BottomTwo instead, so when I activate the function, the code is reestructured to this:

import React, { Component } from 'react';
import BodyContent from './BodyContent';
import BottomOne from './BottomOne';
import BottomTwo from './BottomTwo';
class App extends Component {
  render() {
    return (
      <div className="App">
        <BodyContent />
        <BottomTwo />
      </div>
    );
  }
}

export default App;

I'm very new to React, so if there's a better way to do it, I'm open to suggestions, but I really need that end result, a function on BodyContent that unmounts BottomOne and mounts BottomTwo.

score 2 · Answer 1 · answered Sep 05 '17 at 19:12

You can maintain a state which tells which component to render. Something roughly like this

import React, { Component } from 'react';
import BodyContent from './BodyContent';
import BottomOne from './BottomOne';
import BottomTwo from './BottomTwo';
class App extends Component {
  changeBottomComponent = (comp) => {
    this.setState({ showBottom: comp})
  }
  render() {
    return (
      <div className="App">
        <BodyContent changeBottomComponent={this.changeBottomComponent}/>
        {this.state.showBottom === 1 ? <BottomOne /> : <BotttomTwo />}

      </div>
    );
  }
}

export default App;

score 1 · Answer 2 · answered Sep 05 '17 at 19:11

You can use state or props to render different components.

Example:

import React, {
    Component
}
from 'react';
import BodyContent from './BodyContent';
import BottomOne from './BottomOne';
import BottomTwo from './BottomTwo';
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            decider: false
        };
    }
    render() {
        const bottomContent = this.state.decider === true ? <BottomOne /> : <BottomTwo />;
        return (
            <div className="App">
                <BodyContent />
                { bottomContent }
            </div>
        );
    }
}
export
default App;

Mayank Shukla · Accepted Answer · 2017-09-05T19:17:06.960

1

To achieve that maintain a state variable in parent component (some kind of identifier for component) and use that state variable to render different component.

Along with that you also need to pass a function from parent to child and use that function to update the parent state value.

Like this:

class App extends Component {
  constructor(){
    super();
    this.state={
      renderOne: true,
    }
    this.update = this.update.bind(this);
  }

  update(){
      this.setState({renderOne: false})
  }

  render() {
    return (
      <div className="App">
        <BodyContent update={this.update}/>
        {this.state.renderOne?  <BottomOne />  : <BottomTwo/> }
      </div>
    );
  }
}

Now inside BodyContent component call this.props.update() to render another component.

edited Sep 05 '17 at 19:17

answered Sep 05 '17 at 19:12

Mayank Shukla

100,735
18
158
142

If the components have states too, how do you recommend I maintain those? I'm thinking about storing them on the App component, and passing them as props. Is that the right way to do it? – Mikael Sep 05 '17 at 19:17
you want to store the child state values even after unmounting? if yes then yes you can store them in parent component and pass in props or if you are using redux/flux then save those values in store. – Mayank Shukla Sep 05 '17 at 19:19
Yes, I want to store them even after unmounting. I see, thank you. – Mikael Sep 05 '17 at 19:20

Fabian Schultz · Answer 4 · 2017-09-05T19:21:29.450

You can also directly use the components in the state and render them. Could be more flexible this way.

const BottomOne = () => <div>BottomOne</div>;
const BottomTwo = () => <div>BottomTwo</div>;

class Example extends React.Component {
  constructor() {
    super();
    this.state = { show: BottomOne };
    this.toggleComponent = this.toggleComponent.bind(this);
  }

  toggleComponent() {
    // Use whatever logic here to decide.
    let show = BottomOne;
    if (this.state.show === BottomOne) {
      show = BottomTwo;
    }

    this.setState({ show });
  }

  render() {
    return (
      <div>
        <button onClick={this.toggleComponent}>Change</button>
        <this.state.show />
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('root'));

<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="root"></div>

React.js - How to implement a function in a child component to unmount another child from the same parent, and mount another component on it's place?

4 Answers4