Multi tool use

How to call React's render method() from another component?

A client request a feature to implement dashboard switching. I'm working on it:

Dashboard.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

// components
import UserDashboard from '../components/dashboard/user-dashboard/UserDashboard.js';
import NewUserDashboard from '../components/new-dashboard/user-dashboard/NewUserDashboard.js';

@connect((state) => {
return {
identity: state.identity.toJS().profile
};
})

export default class Dashboard extends Component {

render() {
const msisdn = this.props.location.state ? this.props.location.state.msisdn : null;
return (
<UserDashboard msisdn={ msisdn }/>
);
}
}


Dashboard.js is the dashboard controller. I have 2 dashboards: UserDashboard, and NewDashboard.

Let's say an user is viewing another screen, and in that screen there's a button. If that button is clicked, the Dashboard will call it's render method, returning NewDashboard instead. And NewDashboard will be automatically displayed. Is this possible?

render

5 Answers
5

Calling render method programmatically not possible.

You have to do state update of that particular component if you want to call render method of that component.

state update

Say,you want to call render method of Dashboard,you must call setState on this component. You can do some dummy state lifiting for that.

Dashboard

setState

Imagine you have this dashboard:

function DashBoard({index}) {
return index == 0 ? <UserDashBoard /> : <SecondDashBoard />;
}


Without a router:

class ParentComponent extends ReactComponent {

state = {
dashboardIndex: 0
}

changeDashboard() {
this.setState({
dashBoardIndex: (state.dashboardIndex + 1) % 2
})
}

render() {
return (


With a router:

<Switch>
<Route match="/component1" component={UserDashboard} />
<Route match="/component2" component={SecondDashboard} />
</Switch>


Also you can use redux.

You can use conditional rendering using state.
You can keep track of currently active tab and use that state to render the desired component.

More often than not, in order to change page views, you would make use of Router. You can configure Routes corresponding to Dashboard

import UserDashboard from '../components/dashboard/user-dashboard/UserDashboard.js';
import NewUserDashboard from '../components/new-dashboard/user-dashboard/NewUserDashboard.js';

@connect((state) => {
return {
identity: state.identity.toJS().profile
};
})

export default class Dashboard extends Component {
render() {
const msisdn = this.props.location.state ? this.props.location.state.msisdn : null;
return (
<BrowserRouter>
<Route path="/dashboard/user" render={(props) => <UserDashboard msisdn={ msisdn } {...props}/>} />
<Route path="/dashboard/new" render={(props) => <NewUserDashboard msisdn={ msisdn } {...props}/>} />
</BrowserRouter>
);
}
}


and on button click you can use a link.

Or else you can conditionally render component based on state change

// components
import UserDashboard from '../components/dashboard/user-dashboard/UserDashboard.js';
import NewUserDashboard from '../components/new-dashboard/user-dashboard/NewUserDashboard.js';

@connect((state) => {
return {
identity: state.identity.toJS().profile
};
})

export default class Dashboard extends Component {
state = {
userDashboard: true
}
onToggle=(state)=> {
this.setState(prevState => ({
userDashboard: !prevState.userDashboard
}))
}
render() {
const msisdn = this.props.location.state ? this.props.location.state.msisdn : null;
return

Probably something like:

class NewDashboard extends React.Component {

static triggerRender() {
this.forceUpdate();
}

// or
static altTriggerRender() {
this.setState({ state: this.state });
}

render() {...}
}


Force React Component Render

Though, it's better to show/hide other components by conditional rendering.

Update:
"This" is not accessible inside a static method. Ignore the code.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.