null value not updating in Semantic react Input field

Question

I am creating a form with React Semantic UI. Here is the Form.

<Form onSubmit={this.handleSubmit}>
          <Form.Group>
            <Form.Input
              placeholder="Name"
              name="name"
              value={name}
              onChange={this.handleChange}
            />
            <Form.Input
              placeholder="Email"
              name="email"
              value={email}
              onChange={this.handleChange}
            />
            <br />
            <Form.Button content="Submit" />
          </Form.Group>
        </Form>

Here is the submit action method

handleSubmit = () => {
    const { name, email } = this.state;
    this.setState({
      submittedName: name,
      submittedEmail: email,
      name: null,
      email: null
    });
  };

After saving the input field values into submitted values, i am trying to update name and email to null. The value is updating to null but the Input box is still showing the typed value only.

if I am updating value as "" (like below), it's updating fine.

handleSubmit = () => {
    const { name, email } = this.state;
    this.setState({
      submittedName: name,
      submittedEmail: email,
      name: "",
      email: ""
    });
  };

But it's not working for null value alone. Any leads here. Sample codesandbox: https://codesandbox.io/s/nullvalueissue-h3sv9?file=/example.js:289-476

Answer 1

The examples in the docs all reset using "" but if for some reason you need to use null then just set the value conditionally: value={email ? email : ""}

Edited sandbox: https://codesandbox.io/s/nullvalueissue-forked-hllno