如何仅在选择选项时显示日期选择器？

Question

I am using react-datepicker and have a select with 4 options, I need to show the calendar only when option number 3 is selected. Here's the code I have so far.

 const [startDate, setStartDate] = useState(new Date())

 <div className="input-block"> <label htmlFor="status">Status</label> <select id="status" name="status" required> <option value="1">Aguardando Disponibilidade</option> <option value="2">Aguardando Agendamento</option> <option value="3">Ativação Agendada</option> <option value="4">Ativação Efetuada</option> </select> <div className="calendar"> <DatePicker className="calendar-input" selected={startDate} onChange={(date) => setStartDate(date)} showTimeSelect timeFormat="HH:mm" dateFormat="dd/MM/yyyy HH:mm " /> </div> </div>

Answer 1

import React, { useState } from 'react';

const YourComp = () => {
  const [selectedValue, updateSelectedValue] = useState();
  const [startDate, setStartDate] = useState(new Date())

  const onSelectChange = ({ target: { value } }) => updateSelectedValue(value);

  return (
    <div className="input-block">
     <label htmlFor="status">Status</label>
     <select
      id="status"
      name="status"
      required
      onChange={onSelectChange}
     >
       <option value="1">Aguardando Disponibilidade</option>
       <option value="2">Aguardando Agendamento</option>
       <option value="3">Ativação Agendada</option>
       <option value="4">Ativação Efetuada</option>
     </select>
   {
     selectedValue === '3'
     ? (
      <div className="calendar">
        <DatePicker
         className="calendar-input"
         selected={startDate}
         onChange={(date) => setStartDate(date)}
         showTimeSelect
         timeFormat="HH:mm"
         dateFormat="dd/MM/yyyy HH:mm "
        />
      </div>
     )
     : null
   }
</div>
  )
}

The above mentioned code should resolve your issue. The idea is to put a conditional check to render DatePicker component. React Official Doc - Conditional Rendering