根据 select 框 reactjs 的条件渲染元素

Question

I want to change element base on render condition select value, how can I do this? When the value of select box change, I want to replace element below of my code by another, someone may help me with react rendering condition?

<Col span={12}>
       <Form.Item
           label='Số lượng'
           {...formItemLayout}
           labelAlign='left'
       >
           <Select
               onChange={this.handleChangeSelectDUC}
                defaultValue="Đơn lẻ"     
           >
               <Option
                   value="Đơn lẻ"
               >
                   Đơn lẻ
               </Option>
               <Option
                   value="Số lượng lớn"
               >
                   Số lượng lớn
               </Option>
           </Select>
       </Form.Item>
   </Col>
   <Col span={12}>
       {
          conditon if select value = "Đơn lẻ"
               ?
               (
               <FormItem
                   label='Số ĐT'
                   {...formItemLayout}
                   labelAlign='left'
               >
                   <Input
                       name='title'
                       onChange={this.handleChangeInput}
                   />
               </FormItem>
           ):(
               <FormItem
                   label='DS khách hàng'
                   {...formItemLayout}
                   labelAlign='left'
               >
                   <Upload {...props}>
                       <Button>
                           <Icon type="upload" /> Tải lên tệp
                       </Button>
                   </Upload>,
               </FormItem>
           )
       }
   </Col>

Answer 1

You need to transform the select element into controlled component , where its selected value depends on a value in your state. Then you can specify your condition easily, eg.:

{this.state.value === "Đơn lẻ" ? (
// render something
) : (
// render something else
)}

Answer 2

Try this. Get value of your select in a variable and then compare.

<Col span={12}>
    {
        value == "Đơn lẻ" ?
        <FormItem1 ....> : 
        <FormItem2 ...>
    }
</Col>