React - form - unable to update/edit value in input/textarea - writing disable

Question

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 1

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.