theJuls theJuls - 1 month ago 14
React JSX Question

Can I use a menu or buttons to switch react components on a single page app?

This is somewhat of a continuation of this thread, since I found a better way to word my question.

All I want to do, is press a button on the side menu, which will switch a react component on another part of the screen. Currently I have my application with nested routes, but I have no idea how to update the components from the nested menu.

Here is a drawing of what I am trying to do:

enter image description here
Basically at each option I click, I would like a different component to render on the section or at least completely different information (I have different diagram, images, etc that need to be displayed).

Initially I am trying to do it through nested Routes, but reached a point in which I am stuck and have no idea how I can update my component according to what item the user clicks. Here is the current relevant code:

//app.js
ReactDOM.render(

<Router history={hashHistory}>
<Route path="/" component={App} handler={App}>
<IndexRoute component={Index}/>
<Route path="about" component={About}>
</Route>
<Route path="help" component={Help}>
<Route path="help/:helpOption" component={HelpPanel}/>

</Route>

</Route>


,
destination
);

//help.js

export class HelpPanel extends Component{

render(){

return (

<div>{this.props.params.helpOption}</div>
);
}


}

export class Help extends Component{

render(){

return (
<Grid>
<Title/>
<Row className="show-grid">
<Col lg={2} md={4} sm={4}>
<HelpMenu/>
</Col>
<Col lg={8} md={8} sm={8}>
{this.props.children || "Please select topic from the menu for more information"}
</Col>

</Row>
</Grid>
);


}
}

Thanks in advance!

Answer

i have build solution for this task. not perfect but it works.
check it out http://codepen.io/dagman/pen/gwzBjX.
so when you click on option2 <HelpPanel2 /> substitutes <HelpPanel1 /> and so on. Afaik react-router is about loading component when the prescribed url pathes is matched.

    class HelpPage extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                panelIndex: 0
            };
        }

    getBtnId = (e) => {
        if(e.target && e.target.nodeName == "BUTTON") {
            console.log(e.target);
            this.setState({
                panelIndex: Number(e.target.id)
            });
      }
    };

    render() {
        return (
            <div className="container">
                <HelpMenu
                    getBtnId={this.getBtnId}
                />
                <HelpPanels
                    panelIndex={this.state.panelIndex}
                />
            </div>
        )
    }
}

const HelpMenu = ({ getBtnId }) => {
    return (
        <div 
            className="btnGroup"
            onClick={getBtnId}
        >
            <button id="0">Option 1</button>
            <button id="1">Option 2</button>
            <button id="2">Option 3</button>
            <button id="3">Option 4</button>
        </div>
    );
};

class HelpPanels extends React.Component {

    render() {
        const panels = [
            <HelpPanel1 />,
            <HelpPanel2 />,
            <HelpPanel3 />,
            <HelpPanel4 />
        ];
        const correctPanel = panels[this.props.panelIndex];
        return (
            <div className="panel-box">
            {correctPanel}
            </div>
        );
    }
}

const HelpPanel1 = () => (
    <h1>Panel for Option 1</h1>
);
const HelpPanel2 = () => (
    <h1>Panel for Option 2</h1>
);
const HelpPanel3 = () => (
    <h1>Panel for Option 3</h1>
);
const HelpPanel4 = () => (
    <h1>Panel for Option 4</h1>
);

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