Input does not show entered value in react - reactjs

Question

class IndividualPsid extends Component {
constructor(props) {
super(props);
this.state = {
editData: false,
newSkuid: this.props.SkuId
}
this.updateState = this.updateState.bind(this);
}
updateState(e) {
const psid = e.target.value;
this.setState({ newSkuid: psid }, () => {
this.props.onPsidChange(this.props.id, this.state.newSkuid);
});
}
render() {
let member = '';
if (this.props.editingProp) {
member = (
<div>
<input value={this.state.newSkuid} key={this.props.SkuId + uuidv4()} onChange={this.updateState}
className="skuid col-xs-7" />
</div>
)
}
else {
member = (
<div key={this.props.SkuId + uuidv4()} className="skuid col-xs-7" >{this.props.SkuId}</div>
)
}
return (
<div className="row" >
<div className="skuname col-xs-5">{this.props.SkuName}</div>
{member}
</div>);
}
}
export default IndividualPsid;
Above is my child component code(Psid.js). When I click on Edit button, the input box shows , then I type something in the input box it does not show the typed number but when I click on save it shows the updated part. So basically according to my knowledge this.state.newSkuid does not update in the value of input. And below is my parent file (Category.js) that renders the IndividualPsid.
edit(skuList) {
if (this.state.editing == false) {
this.setState({
text: 'SAVE',
editing: true
});
}
else {
this.setState({
text: 'EDIT',
editing: false
});
this.props.edit_menu_items_api(this.state.changedSkus);
}
this.render();
}
render() {
return (
<button className="edit" onClick={() =>
this.edit(this.props.categoryData.productList[0].brandProductSkuList)}>
{this.state.text}</button>
)
}

Answer 1

It works if I put the logic of diplaying the input box on edit button click in componentWillReceiveProps function.
Here is my code of my child component.
componentWillMount() {
this.member = <div key={this.props.skuId} className="skuid col-xs-7" >{this.props.skuId}</div>
}
componentWillReceiveProps(nextProps) {
if (this.props.editingProp !== nextProps.editingProp && nextProps.editingProp) {
this.member = <div className="skuid col-xs-7">
<input defaultValue={this.state.newSkuid} key={this.props.skuId} onChange={this.updateState}
onBlur={() => { this.props.onPsidChange(this.props.id, this.state.newSkuid) }} />
</div>
} else if (this.props.editingProp !== nextProps.editingProp && !nextProps.editingProp) {
this.member = <div key={this.props.skuId} className="skuid col-xs-7" >{this.props.skuId}</div>
}
this.setState({ editData: nextProps.editingProp });
}
render() {
return (
<div className="row" >
<div className="skuname col-xs-5">{this.props.skuName}</div>
{this.member}
</div>);
}