REACT component update - reactjs

Question

I have this code where sets state on text field change.
and it also may get it's values from the props. It all works fine when I set state from the props value but I can not delete the text field values or change them.
componentDidUpdate(){
if (this.search.nid && this.state.nid !== this.search.nid) this.setState({ ...this.state, nid: this.search.nid })
if (this.search.cif && this.state.cif !== this.search.cif) this.setState({ ...this.state, cif: this.search.cif })
if (this.search.deposit && this.state.deposit !== this.search.deposit)
this.setState({ ...this.state, deposit: this.search.deposit })
}
render() {
this.deposits = this.props.permissions.permissions ? this.props.permissions.permissions : this.props.permissions
this.search = this.props.permissions.search ? this.props.permissions.search : {}
const features = this.props.config.features
return (
<div className='container'>
<div className={'shapeSection'}>
<i style={{ margin: '6px', fontSize: '25px' }} className='fa fa-check-circle' />
<h2>مدیریت دسترسی</h2>
</div>
<Form className={Style.formWrapper} onSubmit={e => {
e.preventDefault()
}}>
<FormGroup className='row'>
<Col sm={10}>
<Row>
<div className='floating-label col-4'>
<input className='floating-input floating-input-height1' type='text' placeholder=' ' name='nid'
onKeyPress={this.handleKeyPress}
onClick={this.handleClick}
onChange={(e) => this.setState({ ...this.state, nid: e.target.value })}
maxLength='15' value={this.state.nid} />
<label className='cust-label'>شناسه مشتری(کدملی،کداتباع،کدسیستم)</label>
</div>
{!features.hideCifInputInPermission.enable && <div className='floating-label col-4'>
<input className='floating-input floating-input-height1' type='text' placeholder=' ' name='cif'
onKeyPress={this.handleKeyPress}
onClick={this.handleClick}
value={this.state.cif}
onChange={(e) => this.setState({ ...this.state, cif: e.target.value })}
maxLength='15' />
<label className='cust-label'>شماره مشتری</label>
</div>}
<div className='floating-label col-4'>
<input className='floating-input floating-input-height1' type='text' placeholder=' ' name='deposit'
onKeyPress={this.handleKeyPress}
onClick={this.handleClick}
onChange={(e) => this.setState({ ...this.state, deposit: e.target.value })}
maxLength='18' value={this.state.deposit} />
<label className='cust-label'>{`شماره‌${strings.deposit || 'حساب'}`}</label>
</div>
</Row>
<Col sm={12}>
<FormText color="muted">
<span>{this.state.hint}</span>
</FormText>
</Col>
</Col>
<Col sm={2}>
<Button className={`${Style.searchBtn} col-sm-8`} color='info' onClick={this.findAccess}
type='button'>جستجو</Button>
<button onClick={this.handleHintClick} className={Style.hintBTN}>
<FontAwesomeIcon icon='question' />
</button>
</Col>
</FormGroup>
</Form>
{this.deposits.length && (this.state.nid.length || this.state.deposit.length || this.state.cif) ?
<div>
<PermissionsTable alert={this.alert} nid={this.state.nid} deposit={this.state.deposit} cif={this.state.cif} />
</div>
: (
<div>
<PermissionsTable alert={this.alert} />
</div>
)
}
{this.state.modal &&
<PermissionHintModal close={() => {
this.setState({ modal: false })
}} features={features} />
}
</div>
)
}
As you can see, there are no easily noticeable errors but I don't see how I can edit my states.
How can I change the text field values?

Answer 1

If you want to change the values of your text fields then you should only have to change the states of the text fields.
You might also want to look into using hooks as they are recommended by React themselves and they are generally considered much easier to manage.

Answer 2

using hooks can help you on this faster [https://reactjs.org/docs/hooks-intro.html]