setState is not updating the state even callback - reactjs

Question

On input field change, the handler function gets called and updates the state, but the state is not getting updated. I know setState() is async so I put the console.log in the callback.
Here are the functions:
class WorkspaceEditModal extends React.PureComponent {
constructor(props) {
super(props);
console.log(props.selectedWorkspace); // prints correct value
this.state = {
editWorkspaceName: props.selectedWorkspace,
exists: false,
};
}
handleEditChange = event => { // this handler is called
console.log(event.target.value); // prints new value
this.setState({ editWorkspaceName: event.target.value },
() => {console.log(this.state.editWorkspaceName)}); // still prints old value
};
handleFocus = e => e.target.select();
handleKeyPress = e => {
if (e.key === 'Enter') {
e.preventDefault();
this.editWorkspace();
}
};
render() {
const { editWorkspaceName, exists } = this.state;
let content;
content = (
<div className="save-workspace">
<div className="modal-header">
<div className="modal-title">
<p>Rename Workspace</p>
</div>
<div className="modal-select">
<span className="input-label">Workspace Name</span>
<div>
<input
className="name-input"
placeholder="Workspace Name"
type="text"
defaultValue={editWorkspaceName}
onChange={this.handleEditChange} // calls the handler on change
onFocus={this.handleFocus}
onKeyPress={this.handleKeyPress}
autoFocus
/>
{notValid && (
<p className="invalid">
Only alphanumeric characters, hyphens, spaces, and
underscores are allowed.
</p>
)}
</div>
</div>
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-default"
onClick={this.onCloseModal}
>
Cancel
</button>
<button
type="button"
className="btn btn-primary"
onClick={this.editWorkspace}
disabled={notValid}
>
Update
</button>
</div>
</div>
);
const contentStyle = {
width: '500px',
};
return (
<Modal
isOpen={true}
onClose={this.onCloseModal}
contentStyle={contentStyle}
shouldCloseOnOverlayClick={true}
>
{content}
</Modal>
);
}
}
I don't know why this is happening. This is crazy.
Thank you for your help.

Answer 1

You are passing down the default value of the input via props. That should be your input default value. It should not update the state of the child component.
State should be updated on the parent component, not the child in this case. The handleEditChange (handleChange in example) function should be placed in the parent component, then passed down via props to the input. You want the props value changed in the parent via that parent function so that setState works properly.
You could use getDerivedStateFromProps, but it seems unnecessary here. https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html
class ParentWorkSpaceEditModal extends React.Component {
constructor(props) {
super(props);
this.state = {
editWorkspaceName: 'whatever your original value is',
exists: false,
};
}
handleChange = event => {
this.setState({ editWorkspaceName: event.target.value });
};
render() {
const { editWorkspaceName, exists } = this.state;
return (
<ChildWorkspaceEditModal editWorkspaceName={editWorkspaceName} exists={exists} handleChange={this.handleChange} />
)
}
}
const ChildWorkspaceEditModal = ({ editWorkspaceName, exists, handleChange )} => {
content = (
<div className="save-workspace">
<div className="modal-header">
<div className="modal-title">
<p>Rename Workspace</p>
</div>
<div className="modal-select">
<span className="input-label">Workspace Name</span>
<div>
<input
className="name-input"
placeholder="Workspace Name"
type="text"
value={editWorkspaceName}
onChange={handleChange}
/>
{notValid && (
<p className="invalid">
Only alphanumeric characters, hyphens, spaces, and underscores are allowed.
</p>
)}
</div>
</div>
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-default"
onClick={this.onCloseModal}
>
Cancel
</button>
<button
type="button"
className="btn btn-primary"
onClick={this.editWorkspace}
disabled={notValid}
>
Update
</button>
</div>
</div>
);
const contentStyle = {
width: '500px',
};
return (
<Modal
isOpen={true}
onClose={this.onCloseModal}
contentStyle={contentStyle}
shouldCloseOnOverlayClick={true}
>
{content}
</Modal>
)
}