CODEWITHSUNDEEP
javascriptreactjs
Max T
Max T

Reputation: 1455

Conditional rendering inside form in React not working

I'm trying for this component to show the specific form based upon the option select. I'm using the switch statement for conditional rendering. But at the moment it's not working, what am I missing?

class Form extends Component {
    state = {
            selectedValue: ''
        };
    handleChange(event) { 
        this.setState({selectedValue: event.target.value}); 
        }
    renderSelectedForm = (param) => {
        const formStyle = {
            display: 'none'
        }
        switch(param) {
            case 'form_name1':
            return <form name="form_name1" id="form_name1" style={formStyle}>
                    form 1
                    </form>;
            case 'form_name2':
            return <form name="form_name1" id="form_name2" style={formStyle}>
                    form 2
                    </form>;
            case 'form_name3':
            return <form name="form_name1" id="form_name3" style={formStyle}>
                    form 3
                    </form>;
            default:
            return null;
        }
    }

    render() {

        return (
             <div>
      <div className={styles.ContactUs}>
              <form >
                <select value={this.state.selectedValue} onChange={this.handleChange}>
                    <option value="form_name1">Form 1</option>
                    <option value="form_name2">Form 2</option>
                    <option value="form_name3">Form 3</option>
                </select>
             </form>
      {this.renderSelectedForm(this.state.selectedValue)}
    </div>
    </div>
        );
    }
}

export default Form;

Upvotes: 0

Views: 306

Answers (4)

herodrigues
herodrigues

Reputation: 967

Set a default value in your state for the first form to be shown, such as form_name1. Or add an option like 'Select a form' to your select element.

If you're doing conditional rendering, you don't really need to set display: none in your elements. Each element will be rendered according to your current state and null is returned for unmounting the component.

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedValue: 'form_name1'
    }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(event) { 
    this.setState({selectedValue: event.target.value}); 
  }

  renderSelectedForm (param) {
    switch(param) {
      case 'form_name1':
        return (
          <form name="form_name1" id="form_name1">
            form 1
          </form>
         )
      case 'form_name2':
        return (
          <form name="form_name1" id="form_name2">
            form 2
          </form>
        )
      case 'form_name3':
        return (
          <form name="form_name1" id="form_name3">
            form 3
          </form>
        )
      default: return null;
     }
   }

  render() {
    return (
      <div>
        <form>
          <select value={this.state.selectedValue} onChange={this.handleChange}>
            <option value="form_name1">Form 1</option>
            <option value="form_name2">Form 2</option>
            <option value="form_name3">Form 3</option>
          </select>
        </form>
        {this.renderSelectedForm(this.state.selectedValue)}
      </div>
    );
  }
}

Here's in action: https://codepen.io/herodrigues/pen/XOBLVb

Upvotes: 0

Gregory Friedman
Gregory Friedman

Reputation: 76

handleChange = (event) => {
    this.setState({ selectedValue: event.target.value   });
}

You either need to make a constructor that binds this for the handleChange function or just declare it in the way above, which auto-binds.

constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
}

Upvotes: 1

Maheer Ali
Maheer Ali

Reputation: 36594

You need to wrap inside (). Like below 

switch(param) {
     case 'form_name1':
     return (<form name="form_name1" id="form_name1" style={formStyle}>
     form 1
     </form>);                        
     ...
}

Upvotes: 0

ehutchllew
ehutchllew

Reputation: 958

Your display is set to 'none'.

Upvotes: 1

Related Questions