React – form – unable to update/edit value in input/textarea – writing disable Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of React – form – unable to update/edit value in input/textarea – writing disable without wasting too much if your time.

The question is published on by Tutorial Guruji team.

Here is the code:

import React from 'react';

class EditEntry extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            entry: '',
            description: '',
            item: [],
            error: null
        };

        this.handleChangeEntry = this.handleChangeEntry.bind(this);
        this.handleChangeDescription = this.handleChangeDescription.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    componentDidMount() {
        const { match: { params } } = this.props;
        const { id } = params;
        fetch(`/api/entries/${id}`, {
            method: 'GET'
        })
            .then(response => response.json())
            .then(
                data => {
                    this.setState({
                        item: data
                    });
                },
                error => {
                    this.setState({
                        error
                    });
                });
    }

    handleChangeEntry(e) {
        this.setState({ entry: e.target.value });
    }

    handleChangeDescription(e) {
        this.setState({ description: e.target.value });
    }

    handleSubmit(e) {
        e.preventDefault();

        const { entry, description } = this.state;
        const { match: { params } } = this.props;
        const { id } = params;

        fetch(`/api/entries/${id}`, {
            method: 'PUT',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(entry, description)
        })
            .then(response => {
                if (response.ok) {
                    window.location.assign("/");
                } else {
                    throw new Error('No response.');
                }
            },
                error => {
                    this.setState({
                        error
                    });
                });
    }

    render() {

        const { item } = this.state;

        const itemEditForm = item.map(i => {
            return <div key={i.id}>
                <form onSubmit={this.handleSubmit}>
                    <div className="form-group">
                        <label htmlFor="entry">Entry</label>
                        <input
                            id="entry"
                            name="entry"
                            type="text"
                            className="form-control"
                            required
                            value={i.entry}
                            onChange={this.handleChangeEntry} />
                    </div>
                    <div className="form-group">
                        <label htmlFor="description">Description</label>
                        <textarea
                            id="description"
                            name="description"
                            type="text"
                            className="form-control"
                            required
                            rows="5"
                            value={i.description}
                            onChange={this.handleChangeDescription} />
                    </div>
                    <button type="submit" className="btn btn-secondary btn-sm mb-sm-2">Submit</button>
                </form>
            </div>
        });

        return (
            <div>
                {itemEditForm}
            </div>
        );
    }
}

export default EditEntry;

I can’t edit the data contained in:

<input id="entry" (...) />
<textarea id="description" (...) />

There is data, there is a cursor, but these fields are disabled for editing.

I fetch an array with one object from the database (componentDidMount()). I know there is another way to access the data contained in an object. But that way in this project doesn’t work. Although in my another project it works. Strange.

Answer

You are setting the “entry” and “description” properties in the onChange handler methods. but using the i.entry and i.description in the value property of the input. Please try changing it and maybe if you have multiple items in the item array, you can try something like below to handle state.

Component:

<input
            id="name"
            name="name"
            type="text"
            className="form-control"
            required
            value={i.name}
            onChange={(e) => this.handleChangeName(e, i.id)}
          />

JS:

handleChangeName(e, id) {
console.log(e.target.value);
const newState = {
  item: this.state.item.map((x) =>
    x.id != id ? x : { id: id, name: e.target.value }
  )
};
this.setState(newState);

}

Also, please find a working example based on your code on the CodeSandbox Link

Thanks.

We are here to answer your question about React – form – unable to update/edit value in input/textarea – writing disable - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji