display functional component if input value is empty-CodePudding

I'm using DateRangePicker from rsuite but I noticed it does not have a required property. Which is allows users to enter a blank date and I'm looking to prevent this from happening. Here is my code:

function App() {
const [value, setValue] = useState('');
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');
  const [data, setData] = useState({});

   const dateOnChange = (date) => {
    const startDate = date[0];
    const startDateString = format(startDate, 'yyyy-MM-dd');
    console.log('Start Date:', startDateString);
    setStartDate(startDateString);
    const endDate = date[1];
    const endDateString = format(endDate, 'yyyy-MM-dd');
    console.log('End Date:', endDateString);
    setEndDate(endDateString);
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    const dataSubmit = { value, startDate, endDate };
    fetch('/table', {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify(dataSubmit),
    })
      .then((res) => res.json())
      .then((data) => {
        setData(data);
      });
  };


    
      return (
              <div className='App'>
                  <DateRangePicker
                    appearance='default'
                    placeholder='Select Date Range'
                    onOk={dateOnChange}
                    format='yyyy-MM-dd'
                    className='sans-fonts-all'
                  />

                  <Form onSubmit={handleSubmit} className='sans-fonts-all'>
                    <InputGroup className='w-50'>
                      <Form.Control
                        type='text'
                        required
                        onChange={(e) => setValue(e.target.value)}
                      />
                      <Button type='submit' className='sans-fonts-all'>
                        Get Info
                      </Button>
                    </InputGroup>
                  </Form>


    </div>
    );
}export default App;

I'm looking to add an if statement at the beginning of my handleSubmit function as the button is pressed. If the dates are empty then I wanted to render a warning that tells the user that a date is required. If the date is passed then it would hit my else portion of the statement and make to request to my backend. I'm new to React and been looking online but I'm not sure what they best approach would be. Any guidance is greatly appreciated.

CodePudding user response：

You can have an error state and when validation is failed then set the error state to true and render the error component.

const [error, setError] = useState(false);

const handleSubmit = (e) => {
    /* Some code here */
    if(!startDate || !endDate) {
      setError(true)
    } else {
      setError(false);
      /* Make API call */
    }
}

return (
  /* Some JSX */
  {error && <ErrorToast />}
)