Not able to edit the input text text in react when using the props - Redux

Question

Not able to edit the text, here is the main component

render() {
    return (
      <div className="container mb-5">
        <RenderProfessionalLearningTable {...this.props} />
      </div>
    );
  }


function RenderProfessionalLearningTable(props) {
  return (
<form className="container" onSubmit={props.professionalLearningFormsubmit}>
 <div className="form-row">
        <div className="form-group col-sm-6">
          <label>Course Name *</label>
          <input type="text" className="form-control" name="courseName" value={props.professionalLearning.courseName || ''} onChange={props.updateprofessionalLearningValue}
            aria-describedby="Course Name" placeholder="Enter a course name" />
        </div>
        <div className="form-group col-sm-6">
          <label>Provider *</label>
          <input type="text" className="form-control" name="provider" value={props.professionalLearning.provider || ''} onChange={props.updateprofessionalLearningValue}
            id="provider" aria-describedby="Provider" placeholder="Enter a Provider" />
        </div>
      </div >
</form >
);
}

Here is the action creator

export const actionCreators = {
updateprofessionalLearningValue: professionalLearningItem => async (dispatch, getState) => {
        let professionalLearning = getState().professionalLearning.professionalLearning;
        professionalLearning[professionalLearningItem.target.name] = professionalLearningItem.target.value;

        dispatch({ type: ReduxConstants.recieveProfessionalLearningUpdatecValue, professionalLearning });
    }
}

Reducer

 case ReduxConstants.receiveFilterProfessionalLearningId:
            return {
                ...state,
                professionalLearning: action.professionalLearning,
                isLoading: false
            };

As per the screen shot I am able to see the changed value, but the UI doesn't reflect it and it doesn't allow me to add more than 1 character. If I press backspace also it doesn't allow me to remove the value.

Some of the reference I followed

Can't type in React input text field

https://github.com/facebook/react/issues/8053

Did you check if `props.professionalLearning.courseName` is changing? — aquilesb, Jul 17 '19 at 07:50
check if you are updating the correct field `onChange` of input in `updateprofessionalLearningValue`, — Harish, Jul 17 '19 at 09:12
the values that you are passing to inputs i.e. `value={props.professionalLearning.courseName || ''}` and `value={props.professionalLearning.provider || ''}` are you sure about these are getting updated after `onChange`? — Harish, Jul 17 '19 at 09:14
Yes, the value is getting updated as you can see in the image. But it allowing only one character the second character is not shown. — San Jaisy, Jul 17 '19 at 10:27

score 0 · Answer 1 · answered Jul 17 '19 at 10:39

The issue was with the below code

case ReduxConstants.receiveFilterProfessionalLearningId:
            return {
                ...state,
                professionalLearning: action.professionalLearning, --> change this code
                isLoading: false
            }

New code changed to Object.assign({},action.professionalLearning)

case ReduxConstants.recieveProfessionalLearningUpdatecValue:
            return {
                ...state,
                professionalLearning: Object.assign({},action.professionalLearning),
                isLoading: false
            };

Not able to edit the input text text in react when using the props - Redux

1 Answers1