CODEWITHSUNDEEP
javascriptreactjssemantic-ui-react
Akhil Suseelan
Akhil Suseelan

Reputation: 217

Unable to edit form when loaded with values using Semantic UI React

I have a form loaded with certain values in in its field. I'm unable to type in the value of fields or delete the existing default values when the form was rendered. Basically, I'm trying to add an Update operation in my form in which values are shown in field (e.g. On clicking an edit button, form is displayed with the values).

I tried to capture the event with onChange method but it's not working as I expected. The default values are fetched as props from its parent and passed to the value argument of the form. I'm using semantic UI React components for the form.

Here is the example in codesandBox of what I'm trying to implement: codesandbox

In the above example, variable is passed to value in form.

Upvotes: 1

Views: 621

Answers (1)

Sagar More
Sagar More

Reputation: 476

if you look at the error, it clearly says: A component is changing an uncontrolled input of type text to be controlled. Which means you have to store the values of name, email in state on initialization, and have those values changed on onChange event. And not update values only on onChange.

import React, { Component } from "react";
import { Form } from "semantic-ui-react";

class FormExampleClearOnSubmit extends Component {
  state = {
    name: "james",
    email: ""
  };

  handleChange = (e, { name, value }) => this.setState({ [name]: value });

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

  render() {
    const { name, email } = this.state;

    return (
      <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}
          />
          <Form.Button content="Submit" />
        </Form.Group>
      </Form>
    );
  }
}

export default FormExampleClearOnSubmit;

Upvotes: 2

Related Questions