Issue with Semantic ui react calendar

Question

I've defined the following component to be rendered using JSX:

const TestingDate = () => {
  return (
    <Container>
      <DateInput
        clearable
        clearIcon={<Icon name="remove" color="red" />}
        name="date"
        value="2 Apr 2020"
        onChange={a => handleDateChange(a)}
      />
    </Container>
  );
};

However, the issue I'm having is that, in the handleDataChange, I have to keep track of the date (namely the value prop of DateInput which is imported from "semantic-ui-calendar-react", but I can't find any reasonable way of passing that to the handleDateChange function... I can see it's a super basic issue but I'm kind of stuck since it's my first time working with DateInput and the tutorial used the older style where you'd bind a callback to the DateInput as a prop.

If it helps, what I'd like to do is just call this line setDate(value) in the handleDataChange function. Thanks!

Answer 1

I was having the same issue and was able to resolve it by doing the following.

const TestingDate = () => {
  const [date, setDate] = useState(null);

  function handleDateChange(name, value) {

    setDate(value)

  }

  return (
    <Container>
      <DateInput
        clearable
        clearIcon={<Icon name="remove" color="red" />}
        name="date"
        value="2 Apr 2020"
        onChange={(a, {name, value}) => handleDateChange(name, value)}
      />
    </Container>
  );
};

I hope that helps!