theJuls theJuls - 9 days ago 6
Javascript Question

Changing a component in reactjs upon clicking a button

I have a menu with for buttons, each one directs to a different form. So basically I just want a respective form to appear as I click each button. My current code is not updating the components, but the functions are being called:

export default class Configuration extends Component{

constructor(props){
super(props);
this.state ={
response:"",
};
currentMode ='upload';
this.getForms = this.getForms.bind(this);

}

componentWillMount(){
this.getForms('upload');
}

getForms(current_mode){
console.log('im in', current_mode);
switch(current_mode){
case 'form1':
return (<div><Form1/></div>);
case 'form2':
return (<div><Form2/></div>);
case 'form3':
return (<div><Form3/></div>);
case 'form4':
return (<div><Form4/></div>);
}
}

render(){
return (
<div>
<ConfigurationMenu getForms={this.getForms}/>
{this.getForms(currentMode)}
</div>

}
}

// here are the buttons:
class ConfigurationMenu extends Component{

constructor(props){
super(props);
this.state={key:1}
}

handleSelect(key, formCategory){
console.log('hiiii', formCategory);
this.props.getForms(formCategory);
currentMode=formCategory;
this.setState({key:key});
}

render(){
return (
<Nav bsStyle="tabs" activeKey={this.state.key}>
<NavItem eventKey={1} title="Form1" onClick={()=>this.handleSelect(1, 'form1')}>Form1</NavItem>
<NavItem eventKey={2} title="Form2" onClick={()=>this.handleSelect(2, 'form2')}>Form2</NavItem>
<NavItem eventKey={3} title="Form3" onClick={()=>this.handleSelect(3, 'form3')}>Form3</NavItem>
<NavItem eventKey={4} title="Form4" onClick={()=>this.handleSelect(4, 'form4')}>Form4</NavItem>
</Nav>
);
}
}

Answer

If what I understand is correct you want to change the form component rendered when you click the button in ConfigurationMenu.

Try this approach:

CloudsimConfiguration

export default class CloudsimConfiguration extends Component {

  constructor(props) {
    super(props);
    this.state = {
      response: '', // I am not sure about the purpose of this, leaving it as it is
      currentMode: 'form1',
    };
  }

  // returns the corresponding Form based on currentMode
  getForm(currentMode) {
    const forms =  {
      form1: <Form1/>,
      form2: <Form2/>,
      form3: <Form3/>,
      form4: <Form4/>
    };

    return forms[currentMode];
  }

  // update currentMode when ConfigurationMenu triggers the callback
  toggleForm(currentMode) {
    this.setState({ currentMode });
  }

  render() {
    return (
      <div>
        <ConfigurationMenu toggleForm={this.toggleForm} />
        <div>
          {this.getForm(this.state.currentMode)}
        </div>
      </div>
    );
  }
}

ConfigurationMenu

class ConfigurationMenu extends Component {
  constructor(props) {
    super(props);
    this.state = { key: 1 };
  }

  handleSelect(key, formCategory) {
    this.props.toggleForm(formCategory);
    this.setState({ key });
  }

  render(){
    return (
      <Nav bsStyle="tabs" activeKey={this.state.key}>
        <NavItem eventKey={1} title="Form1" onClick={() => this.handleSelect(1, 'form1')}>Form1</NavItem>
        <NavItem eventKey={2} title="Form2" onClick={() => this.handleSelect(2, 'form2')}>Form2</NavItem>
        <NavItem eventKey={3} title="Form3" onClick={() => this.handleSelect(3, 'form3')}>Form3</NavItem>
        <NavItem eventKey={4} title="Form4" onClick={() => this.handleSelect(4, 'form4')}>Form4</NavItem>
      </Nav>
    );
  }
}
Comments