如何使用 reactJS 根据下拉选择更改表单字段

Question

In my dropdown I have two options, Yes or No I want one component to render when user select Yes and other to another component to render if user selects No. Also I want when page refresh, no options should be shown on page

Check Image

How can I achieve my goal? I am sharing my code below

Here is the dropdown fields, 
const CustomTimings=[
  {label:'Yes', value: 1},
  {label:'No', value: 2}
]

const DateAndTime = () => (
      <div>
        {CustomTimings === 'Yes'
        ? <CustomeTimeYes />
        : <CustomeTimeNo />
    }
return
<div className="input-field">
            <div class="row">
              <div class="col-4">
              <label htmlFor="customerype">Customer Type</label><br />
              <Select options={CustomerType} onChange={this.handleChangeCT} value={this.state.CustomerType} />
              </div>
              <div class="col-4">
              <label htmlFor="learning">Do you have custom timings</label><br/>
              <Select options={CustomTimings} onChange={this.handleChangeCTime} value={this.state.CustomTimings} />
              </div>
            </div>
          </div><br />
          <div>
          {DateAndTime()}
          <br />
          </div>

Can somebody explain what I am doing wrong here, either it is showing both components or any one and not changing on refresh

Answer 1

You can work with conditional rendering where you check for a specific condition before render your component.

render() {
const { value } = this.state;

return (
   <div>
       {value === 'dropdown' && <Component1>...</Component1>}
       {value === 'text' && <Component2></Component2>}
       {value === 'checkboxes' && <Component3></Component3>}
       ...
   </div>
  )
}