A component is changing an uncontrolled input of type text to be controlled

0
votes

Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.*

^ This error is popping up when I'm pressing on Edit Button,

Any suggestions?

Code :

render() {
    const {isEditMode} = this.state;
    const {todoItem, submitEdit, deleteItem} = this.props;

    return <li>
        {
            isEditMode ? (
                <div>
                    <input
                        ref={this.inputRef}
                        defaultValue={todoItem.todo} type={'text'}
                    />
                    <button
                        onClick={() => {
                            submitEdit(todoItem._id, this.inputRef.current.value);
                            this.setState({isEditMode: !isEditMode})
                        }}
                        className={'btn btn-primary'}
                    >
                        Submit
                    </button>
                    <button
                        onClick={() => {
                            this.setState({isEditMode: !isEditMode})
                        }}
                        className={'btn btn-primary'}
                    >Cancel
                    </button>
                </div>
            ) : (
                <div>
                    <input ref={this.btnRef} onClick={() => this.props.checkSingleCheckBox(todoItem._id)} type={'checkbox'} checked={todoItem.checked}/>
                    <label>
                        {todoItem.todo}
                    </label>
                    <button onClick={() => {
                        deleteItem(todoItem._id)
                    } } className={'btn btn-primary'}>Delete
                    </button>
                    <button onClick={() => this.setState({isEditMode: !isEditMode})} className={'btn btn-primary'}>Edit
                    </button>
                </div>
            )
        }
    </li>

}

}
1
reactjs

1 Answers

1
votes

Use value instead of defaultValue:

value={todoItem.todo}

The defaultValue is used only for initial / constant value. Keeping this won't allow you to change the value. So, updating state on that reference element, you'll get such error: changing an uncontrolled input of type text to be controlled

that way I'm unable to change the value of input field

You'll need to bind onChange event to trigger the changes for the input value.