ToggleButton - how to untoggle?

Question

I am currently using a ToggleButtonGroup in my to-do list to have my input categorized as today/tomorrow/this week/no date. If no button is toggled, todo items will go under 'no date', else it will fall in one of the other 3 categories. My problem is, when I start the app and input a todo without toggling anything, the todo will be properly sorted under 'no date'. However, once I toggle/untoggle any of the [today/tomorrow/this week] options, I can no longer get anything to be sorted under 'no date'. How can I fix this?

Class containing the toggle:

    import React from 'react'
    import shortid from 'shortid'
    import { Button, ButtonGroup, MenuItem, Select, TextField, InputBase } from '@material- 
    ui/core'
    import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab'
    
    export default class TodoForm extends React.Component {
    state = {
        text: '',
        date: ''
    }

    handleChange = (event) => {
        this.setState({
            [event.target.name]: event.target.value
        })
    }

    handleToggleChange = (e, value) => {
        if (this.state.date == value) {
            this.setState({
                date: ''
            })
        } else {
            this.setState({
                date: value
            })
        }
    }

    handleSubmit = (event) => {
        event.preventDefault()

        // If input field empty, do nothing.
        if (this.state.text === '') {
            return
        }

        // Submit the form.
        this.props.onSubmit({
            id: shortid.generate(),
            text: this.state.text,
            date: this.state.date,
            complete: false
        })

        // Empty out input field after todo has been submitted.
        this.setState({
            text: ''
        })
    }

    render() {
        return (
            <form className="td-form" onSubmit={this.handleSubmit}>
                <div className="td-form-input"><InputBase 
                    fullWidth={true}
                    name="text" 
                    value={this.state.text} 
                    onChange={this.handleChange} 
                    placeholder="What do you need to get done?"
                    variant="outlined"
                />
                </div>
                
                <div className="td-form-buttons">
                <ToggleButtonGroup value={this.state.date} onChange={this.handleToggleChange} name="date" id="date-select" exclusive={true} size="small">
                    <ToggleButton value="today">Today</ToggleButton>
                    <ToggleButton value="tomorrow">Tomorrow</ToggleButton>
                    <ToggleButton value="week">This week</ToggleButton>
                </ToggleButtonGroup>
                <Button className="mui-add" onClick={this.handleSubmit} variant="contained"
                    style={{
                        maxWidth: '36px', 
                        maxHeight: '36px', 
                        minWidth: '36px', 
                        minHeight: '36px', 
                        borderRadius: '36px', 
                        margin: '16px'}}
                >+</Button>
                </div>
            </form>
        )
    }
}

Class containing the todos:

   import React from 'react'
import { Button, IconButton } from '@material-ui/core'
import RemoveCircleOutlineIcon from '@material-ui/icons/RemoveCircleOutline';

export default props => (
    <div className={props.todo.complete ? "" : "td-itemBackground"}>
        <div className={props.todo.complete ? "td-itemCompleted" : "td-item"}>
            <Button onClick={props.toggleComplete} 
                style={{
                    maxWidth: '36px', 
                    maxHeight: '36px', 
                    minWidth: '36px', 
                    minHeight: '36px', 
                    borderRadius: '36px', 
                    margin: '16px'}}
            >
                <RemoveCircleOutlineIcon/>
            </Button>
            <div 
                style={{
                    textDecoration: props.todo.complete ? "line-through" : ""
                }} 
                onClick={props.toggleComplete}
            >
                <div className="td-text">{props.todo.text}</div>
            </div>
        </div>
    </div>
)

Answer 1

I am seeing the toggle button group returns null if nothing is selected. So you could check for null and set for no date . Here is the toggle button example. https://codesandbox.io/s/j2wp0?file=/demo.js

handleToggleChange = (e, value) => {
  if (value === null) {
    this.setState({
      date: ''
    })
  } else {
    this.setState({
      date: value
    })
  }
}

Answer 2

Changed the handleToggleChange code to below so the date will properly set back to be empty when a button is untoggled. Not sure if the best way to do it so open to other suggestions.

  handleToggleChange = (e, value) => {
        if (this.state.date == 'today' || this.state.date == 'tomorrow' || this.state.date == 'week') {
            this.setState({
                date: ''
            })
        } else {
            this.setState({
                date: value
            })
        }
    }