React Redux form input editing returns error message of an uncontrolled input

Question

React Redux form input editing returns error message of an uncontrolled input

Below code uses react redux to display a record in a form input from database and it worked fine. when I tried to edit the form input for lastname it does not edit but rather it displays error

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.

here is how am displaying the result that i want to edit in a form input

<input type="text" className="form-control" value={pgs1.items1 && this.props.pgs1.items1[0].lastName}  onChange={this.handleChange}/>  



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

/*
handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }
*/

below is the full react redux code

import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

import { userActions } from '../_actions';

class Edit1 extends React.Component {



constructor(props) {
        super(props);

this.state = {
name: '',
lastName: '',

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


        this.handleChange = this.handleChange.bind(this);

    }

    componentDidMount() {    
this.props.dispatch(userActions.getAll_Rec());


    }

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

/*
handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }
*/




    handleSubmit(event) {
        event.preventDefault();

       //process form submit
    }







    render() {
        const { pg1, pgs1 } = this.props;
        return (




 <div className="list">
                <div >

Name: {pgs1.items1 &&  this.props.pgs1.items1[0].lastName}<br />

<input type="text" className="form-control" value={pgs1.items1 && this.props.pgs1.items1[0].lastName}  onChange={this.handleChange}/>                     

            </div>

</div>

        );
    }
}



function mapStateToProps(state) {
    const { pgs1 } = state;
    const { pg1 } = state;
    return {
        pg1,
        pgs1
    };
}


const connectedEdit1 = connect(mapStateToProps)(Edit1);
export { connectedEdit1 as Edit1 };

score 0 · Accepted Answer · answered Dec 06 '18 at 17:46

At last what solve my problem of input form not editing was replacing form input value{} with defaultValue{} option. I leverage solutions/answer posted by Solanki here React Input Type not editable

Not this anymore

<input type="text" className="form-control" value={pgs1.items1 && this.props.pgs1.items1[0].lastName}  onChange={this.handleChange}/>

but this solve my problem

<input type="text" className="form-control" defaultValue={pgs1.items1 && this.props.pgs1.items1[0].lastName}  onChange={this.handleChange}/>

With implementation of defaultValue{} I can now edit form values all the time.

React Redux form input editing returns error message of an uncontrolled input

1 Answers1