Changing a component in reactjs upon clicking a button

Question

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 1

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>
    );
  }
}