The following subcomponent successfully updates the default values of each individual render properly and display text values on update.
BUT...
when I navigate to another record I am unable to see the updated textbox value changed, it holds on to the previous record's value (even the updated state of that record)?
How do I completely re-fetch new values?
import React from 'react';
import './EditRisk.css';
export class EditRiskDetails extends React.Component {
constructor(props) {
super(props);
this.state = {
riskTitle: props.risk.risktitle,
riskStatement: props.risk.riskstatement,
riskContext: props.risk.riskcontext,
clousreCriteria: props.risk.closurecriteria,
onwerNotes: props.risk.ownernotes,
approverComments: props.risk.approvercomments
}
}
handleRiskTitleChange = (event) => {
this.setState({riskTitle: event.target.value});
this.props.risk.risktitle = event.target.value;
}
handleRiskStatementChange = (event) => {
this.setState({riskStatement: event.target.value});
this.props.risk.riskstatement = event.target.value;
}
handleRiskContextChange = (event) => {
this.setState({riskContext: event.target.value});
this.props.risk.riskcontext = event.target.value;
}
handleClosureCriteriaChange = (event) => {
this.setState({closureCriteria: event.target.value});
this.props.risk.closurecriteria = event.target.value;
}
handleOwnerNotesChange = (event) => {
this.setState({ownerNotes: event.target.value});
this.props.risk.ownernotes = event.target.value;
}
handleApproverCommentsChange = (event) => {
this.setState({approverComments: event.target.value});
this.props.data.approvercomments = event.target.value;
}
componentDidUpdate(e){
}
render() {
return (
<div id="details" class="tbl layout" border="1">
<div class="tr text input">
<div class="td label" style={{verticalAlign: 'top'}}>
Title
</div>
<div class="td input data text">
<input type="text" onKeyPress={this.handleRiskTitleChange} defaultValue={this.state.riskTitle}/>
</div>
</div>
<div class="tr">
<div class="td label" style={{verticalAlign: 'top'}}>
Risk Statement
</div>
<div class="td data" style={{verticalAlign: 'top'}}>
<textarea onKeyPress={this.handleRiskStatementChange} defaultValue={this.state.riskStatement}></textarea>
</div>
</div>
<div class="tr">
<div class="td label" style={{verticalAlign: 'top'}}>
Context
</div>
<div class="td data" style={{verticalAlign: 'top'}}>
<textarea onKeyPress={this.handleRiskContextChange} defaultValue={this.state.riskContext}></textarea>
</div>
</div>
<div class="tr">
<div class="td label" style={{verticalAlign: 'top'}}>
Closure Criteria
</div>
<div class="td data" style={{verticalAlign: 'top'}}>
<textarea onKeyPress={this.handleClosureCriteriaChange} defaultValue={this.state.closureCriteria}></textarea>
</div>
</div>
<div class="tr">
<div class="td label" style={{verticalAlign: 'top'}}>
Owner Notes
</div>
<div class="td data" style={{verticalAlign: 'top'}}>
<textarea onKeyPress={this.handleOwnerNotesChange} defaultValue={this.state.ownerNotes}></textarea>
</div>
</div>
<div class="tr">
<div class="td label" style={{verticalAlign: 'top'}}>
Approver Comments
</div>
<div class="td data" style={{verticalAlign: 'top'}}>
<textarea onKeyPress={this.handleApproverCommentsChange} defaultValue={this.state.approverComments}></textarea>
</div>
</div>
</div>
);
}
}
An adjacent subcomponent updates just fine:
import React from 'react';
import Select from 'react-select';
import { riskValue } from '../../common/Functions';
import './EditRisk.css';
export class EditRiskSummary extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedOwnerId: this.props.data.risk.ownerid,
selectedApproverId: this.props.data.risk.approverid
}
}
handleOwnerChange = (option) => {
this.setState({selectedOwnerId: option.value});
this.props.data.risk.ownerid = option.value;
}
handleApproverChange = (option) => {
this.setState({selectedApproverId: option.value});
this.props.data.risk.approverid = option.value;
}
componentDidUpdate(e) {
let ownerChanged = this.state.selectedOwnerId !== e.data.risk.ownerid;
let approverChanged = this.state.selectedApproverId !== e.data.risk.approverid;
this.state = {
selectedOwnerId: e.data.risk.ownerid,
selectedApproverId: e.data.risk.approverid
}
return ownerChanged || approverChanged;
}
render() {
return (
<div className="tbl layout" id="summary">
<div className="tr">
<div className="td label">Risk #</div>
<div className="td">{this.props.data.risk.riskid} [<a href="" onClick="ctrl.getRiskReport()">Risk Summary</a>]</div>
<div className="td label">
Current Risk
</div>
<div className="td {this.props.risk.currentlevel}">
{riskValue(this.props.data.risk.currentlevel, this.props.data.risk.currentlikelihood, this.props.data.risk.currentconsequence)}
</div>
</div>
<div className="tr">
<div className="td label">
Creator
</div>
<div className="td">
Admin
</div>
<div className="td label">
Risk State
</div>
<div className="td">
{this.props.data.risk.riskstate}
</div>
</div>
<div className="tr">
<div className="td label">
Owner
</div>
<div className="td">
<Select value={this.props.data.users.filter(option => option.value === this.props.data.risk.ownerid)}
options={this.props.data.users}
onChange={this.handleOwnerChange.bind(this)} />
</div>
<div className="td label">
Risk Approver
</div>
<div className="td">
<Select value={this.props.data.users.filter(option => option.value === this.props.data.risk.approverid)}
options={this.props.data.users}
onChange={this.handleApproverChange.bind(this)} />
</div>
</div>
</div>
);
}
}
