I am just trying to append elements (Dynamic elements) but when I want to access these elements I can access only input elements but not the Div which I have given ref, Please help thanks In advance.
Error I am getting:
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
Button,
Card,
CardBody,
CardFooter,
CardHeader,
FormGroup,
Input,
Label,
Col,
} from 'reactstrap';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { policyValidationRule } from "../../../../services/policyValidationRuleService";
import './CreateRule.css';
import $ from 'jquery';
import ReactDOM from 'react-dom';
const url = window.location.href.split("/");
var id = url[url.length - 1];
const RuleForElements = props => {
return (
<div className="ruleForDiv">
<FormGroup>
<div className="row">
<Label htmlFor={'n_PrValidationCodeMasters_FK_' + props.count} className="col-md-3">Select Rule For:</Label>
<Input type="select" className="col-md-6 n_PrValidationCodeMasters_FK" name={'TbPrvalidationruledetail[' + props.count + '][n_PrValidationCodeMasters_FK]'} id={'n_PrValidationCodeMasters_FK_' + props.count}
ref={(ref) => props.thisRefrence.input['n_PrValidationCodeMasters_FK_' + props.count] = ref} onChange={props.thisRefrence.onChangeRuleFor} required>
<option value="">Select Rule For</option>
{props.ruleForOptions}
</Input>
</div>
</FormGroup>
<FormGroup>
<div className="row">
<Label htmlFor={'s_FormulaExpression_' + props.count} className="col-md-3">Select Formula Expression:</Label>
<Input type="select" className="col-md-6 s_FormulaExpression" id={'s_FormulaExpression_' + props.count} name={'TbPrvalidationruledetail[' + props.count + '][s_FormulaExpression]'} required
ref={(ref) => props.thisRefrence.input['s_FormulaExpression_' + props.count] = ref}
>
<option value="">Select Formula Expression</option>
{props.mathMaticSymbols}
</Input>
</div>
</FormGroup>
<FormGroup id={'dropDownTr_' + props.count} ref={(ref) => props.thisRefrence.input['dropDownTr_' + props.count] = ref} style={{ display: "none" }}>
<div className="row">
<Label htmlFor={'s_CompareValueDD_' + props.count} className="col-md-3">Value:</Label>
<Input type="select" className="col-md-6" id={'s_CompareValueDD_' + props.count} name={'TbPrvalidationruledetail[' + props.count + '][s_CompareValueDD]'} required
ref={(ref) => props.thisRefrence.input['s_CompareValueDD_' + props.count] = ref}
>
</Input>
</div>
</FormGroup>
<FormGroup id={'dropDownTrTo_' + props.count} ref={(ref) => props.thisRefrence.input['dropDownTrTo_' + props.count] = ref} style={{ display: "none" }}>
<div className="row">
<Label htmlFor={'s_CompareValueBetweenDD_' + props.count} className="col-md-3">Value To:</Label>
<Input type="select" className="col-md-6" id={'s_CompareValueBetweenDD_' + props.count} id={'s_CompareValueBetweenDD_' + props.count} name={'TbPrvalidationruledetail[' + props.count + '][s_CompareValueBetweenDD]'} required
ref={(ref) => props.thisRefrence.input['s_CompareValueBetweenDD_' + props.count] = ref}
>
</Input>
</div>
</FormGroup>
<FormGroup id={'textTr_' + props.count} ref={(ref) => props.thisRefrence.div['textTr_' + props.count] = ref} style={{ display: "none" }}>
<div className="row">
<Label htmlFor={'s_CompareValueText_' + props.count} className="col-md-3">Value:</Label>
<Input type="text" className="col-md-6" id={'s_CompareValueText_' + props.count} name={'TbPrvalidationruledetail[' + props.count + '][s_CompareValueText]'} required
ref={(ref) => props.thisRefrence.input['s_CompareValueText_' + props.count] = ref}
/>
</div>
</FormGroup>
<FormGroup id={'textTrTo_' + props.count} ref={(ref) => props.thisRefrence.input['textTrTo_' + props.count] = ref} style={{ display: "none" }}>
<div className="row">
<Label htmlFor={'s_CompareValueBetweenText_' + props.count} className="col-md-3">Value To:</Label>
<Input type="text" className="col-md-6" id={'s_CompareValueBetweenText_' + props.count} name={'TbPrvalidationruledetail[' + props.count + '][s_CompareValueBetweenText]'} required
ref={(ref) => props.thisRefrence.input['s_CompareValueBetweenText_' + props.count] = ref}
/>
</div>
</FormGroup>
<FormGroup id={'RadioTr_' + props.count} ref={(ref) => props.thisRefrence.input['RadioTr_' + props.count] = ref} row style={{ display: "none" }}>
<Col md="3">
<Label>Select Value:</Label>
</Col>
<Col md="9">
<FormGroup check inline>
<Input className="form-check-input" type="radio" id={'RadioYes_' + props.count} name={'TbPrvalidationruledetail[' + props.count + '][s_CompareValueRadio]'} value="Yes"
ref={(ref) => props.thisRefrence.input['RadioYes_' + props.count] = ref}
/>
<Label className="form-check-label" check htmlFor={'RadioYes_' + props.count}>Yes</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="radio" id={'RadioNo_' + props.count} name={'TbPrvalidationruledetail[' + props.count + '][s_CompareValueRadio]'} value="No"
ref={(ref) => props.thisRefrence.input['RadioNo_' + props.count] = ref}
/>
<Label className="form-check-label" check htmlFor={'RadioNo_' + props.count}>No</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup>
<div className="row">
<Label htmlFor={'s_ConditionBetween_' + props.count} className="col-md-3">Select Condition Between:</Label>
<Input type="select" className="col-md-6 s_ConditionBetween" id={'s_ConditionBetween_' + props.count} name={'TbPrvalidationruledetail[' + props.count + '][s_ConditionBetween]'} required
ref={(ref) => props.thisRefrence.input['s_ConditionBetween_' + props.count] = ref}
>
<option value="AND">And</option>
<option value="OR">Or</option>
</Input>
</div>
</FormGroup>
<Input type="hidden" id={'element_to_display_' + props.count} name={'element_to_display_[' + props.count + ']'}
ref={(ref) => props.thisRefrence.input['element_to_display_' + props.count] = ref}
/>
<Input type="hidden" id={'s_CompareValueDB_' + props.count} name={'s_CompareValueDB_[' + props.count + ']'}
ref={(ref) => props.thisRefrence.input['s_CompareValueDB_' + props.count] = ref}
/>
<Input type="hidden" id={'s_CompareValueBetweenDB_' + props.count} name={'s_CompareValueBetweenDB_[' + props.count + ']'}
ref={(ref) => props.thisRefrence.input['s_CompareValueBetweenDB_' + props.count] = ref}
/>
<Input type="hidden" id={'n_PrValidationRuleDetail_PK_' + props.count} name={'TbPrvalidationruledetail[' + props.count + '][n_PrValidationRuleDetail_PK]'}
ref={(ref) => props.thisRefrence.input['n_PrValidationRuleDetail_PK_' + props.count] = ref}
/>
</div>
)
}
Elements are appending from RuleForElements component. Both Components are present in same file.
class PolicyValidationRuleCreate extends Component {
constructor(props) {
super(props);
this.apiService = new policyValidationRule();
this.state = {
isFetching: false,
formOptions: [],
products: [],
rulesApplyOn: [],
ruleForOptions: [],
mathMaticSymbols: [],
editRuleData: [],
ruleForElements: [],
};
this.addRow = this.addRow.bind(this);
this.onChangeRuleFor = this.onChangeRuleFor.bind(this);
this.input = [];
this.div = [];
if (isNaN(id) == true) {
id = '';
}
}
componentDidMount() {
this.renderMyData();
}
}
renderMyData() {
//fetch data of dropdowns etc.
this.props.dispatch(this.apiService.fetchPolicyValidationFormOptions(id))
.then((resp) => {
this.setState({
isFetching: true,
});
let productsData = this.props.formOptions.data.n_Product_FKData;
let productsOptions = [];
for (let i = 0; i < productsData.length; i++) {
productsOptions.push(<option key={productsData[i].n_ProductId_PK} value={productsData[i].n_ProductId_PK}>{productsData[i].s_ProductName}</option>);
}
let rulesData = this.props.formOptions.data.s_RuleApplyOnData.POLICYRULEAPPLYON;
let rulesOptions = [];
for (let i = 0; i < rulesData.length; i++) {
rulesOptions.push(<option key={rulesData[i].s_AppCodeName} value={rulesData[i].s_AppCodeName}>{rulesData[i].s_AppCodeNameForDisplay}</option>);
}
this.setState({
formOptions: this.props.formOptions.data,
products: productsOptions,
rulesApplyOn: rulesOptions,
isFetching: false,
editRuleData: this.props.formOptions.data.n_PrValidationRuleMaster_PKData,
});
});
this.props.dispatch(this.apiService.fetchPolicyRuleForOptions())
.then((resp) => {
this.setState({
isFetching: true,
});
let rulesForOptionsArr = this.props.ruleForOptions.data.ValidationCodeDD;
let rulesForOptions = [];
for (let i = 0; i < rulesForOptionsArr.length; i++) {
rulesForOptions.push(<option key={rulesForOptionsArr[i].n_PrValidationCodeMaster_PK} value={rulesForOptionsArr[i].n_PrValidationCodeMaster_PK}>{rulesForOptionsArr[i].s_FieldScreenLabel}</option>);
}
let numberSignArr = this.props.ruleForOptions.data.numberSign;
let numberSign = [];
for (let i = 0; i < numberSignArr.length; i++) {
var part = numberSignArr[i].split(":");
numberSign.push(<option key={part[0]} value={part[0]}>{part[1]}</option>);
}
this.setState({
ruleForOptions: rulesForOptions,
mathMaticSymbols: numberSign,
isFetching: false,
});
});
}
//add rule for row
addRow() {
var count = 0;
count = document.querySelectorAll('#appendRow .n_PrValidationCodeMasters_FK').length;
this.setState({
ruleForElements: [this.state.ruleForElements, <RuleForElements key={parseInt(count)}
ruleForOptions={this.state.ruleForOptions}
mathMaticSymbols={this.state.mathMaticSymbols}
count={parseInt(count)}
thisRefrence={this}
/>]
})
document.getElementById('TableRowIncrementNo').value = (count + 1);
console.log(this.input);
}
render() {
const containerStyle = {
zIndex: 1999
};
if (this.state.products.length == 0) {
return <div className="animated fadeIn pt-1 text-center">Loading...</div>;
} else {
return (
<div className="row">
<div className="animated fadeIn col-md-12">
<ToastContainer position="top-right" autoClose={5000} style={containerStyle} />
<Card>
<form id="ruleForm">
<CardHeader id="formHeader">Create Rule</CardHeader>
<CardBody>
<FormGroup>
<div className="row">
<Label htmlFor="s_RuleCode" className="col-md-3">Rule Code:</Label>
<Input type="text" className="col-md-7 text-uppercase" id="s_RuleCode" ref={(ref) => this.input['s_RuleCode'] = ref} name="s_RuleCode" placeholder="Enter Rule Code" required />
</div>
</FormGroup>
<FormGroup>
<div className="row">
<Label htmlFor="s_Description" className="col-md-3">Description Of Rule:</Label>
<Input type="textarea" className="col-md-7" id="s_Description" ref={(ref) => this.input['s_Description'] = ref} name="s_Description" required />
</div>
</FormGroup>
<FormGroup>
<div className="row">
<Label htmlFor="n_Product_FK" className="col-md-3">Select Product:</Label>
<Input type="select" className="col-md-7" id="n_Product_FK" ref={(ref) => this.input['n_Product_FK'] = ref} name="n_Product_FK" required>
<option value="">Select Product</option>
{this.state.products}
</Input>
</div>
</FormGroup>
<FormGroup>
<div className="row">
<Label htmlFor="s_ScreenErrorMsg" className="col-md-3">Screen Error Msg:</Label>
<Input type="text" className="col-md-7" id="s_ScreenErrorMsg" ref={(ref) => this.input['s_ScreenErrorMsg'] = ref} name="s_ScreenErrorMsg" required />
</div>
</FormGroup>
<FormGroup>
<div className="row">
<Label htmlFor="s_RuleApplyOn" className="col-md-3">Rule Apply On:</Label>
<Input type="select" className="col-md-7" id="s_RuleApplyOn" ref={(ref) => this.input['s_RuleApplyOn'] = ref} name="s_RuleApplyOn" required>
<option value="">Select Rule Apply On</option>
{this.state.rulesApplyOn}
</Input>
</div>
</FormGroup>
<FormGroup className="add_row">
<Button type="button" className="btn-sm pull-right" color="success" onClick={this.addRow}>Add Row</Button>
<Input type="hidden" id="TableRowIncrementNo" name="TableRowIncrementNo" ref={(ref) => this.input['TableRowIncrementNo'] = ref} value="0"></Input>
</FormGroup>
{this.state.ruleForElements}
<FormGroup>
</FormGroup>
<FormGroup>
<div className="row">
<Label htmlFor="s_CanRate" className="col-md-3">Can Rate Policy:</Label>
<Input type="select" className="col-md-7" id="s_CanRate" ref={(ref) => this.input['s_CanRate'] = ref} name="s_CanRate" required>
<option value="Y">Yes</option>
<option value="N">NO</option>
</Input>
</div>
</FormGroup>
<FormGroup>
<div className="row">
<Label htmlFor="s_CanPrintQuote" className="col-md-3">Can Print Quote:</Label>
<Input type="select" className="col-md-7" id="s_CanPrintQuote" ref={(ref) => this.input['s_CanPrintQuote'] = ref} name="s_CanPrintQuote" required>
<option value="Y">Yes</option>
<option value="N">NO</option>
</Input>
</div>
</FormGroup>
<FormGroup>
<div className="row">
<Label htmlFor="s_CanPrintQuote" className="col-md-3">Can Print Application:</Label>
<Input type="select" className="col-md-7" id="s_CanPrintApp" ref={(ref) => this.input['s_CanPrintApp'] = ref} name="s_CanPrintApp" required>
<option value="Y">Yes</option>
<option value="N">NO</option>
</Input>
</div>
</FormGroup>
<FormGroup>
<div className="row">
<Label htmlFor="s_CanBindApp" className="col-md-3">Can Bind Application:</Label>
<Input type="select" className="col-md-7" id="s_CanBindApp" ref={(ref) => this.input['s_CanBindApp'] = ref} name="s_CanBindApp" required>
<option value="Y">Yes</option>
<option value="N">NO</option>
</Input>
</div>
</FormGroup>
<FormGroup>
<div className="row">
<Label htmlFor="s_CanUnBoundApp" className="col-md-3">Can Submit Un Bound Application:</Label>
<Input type="select" className="col-md-7" id="s_CanUnBoundApp" ref={(ref) => this.input['s_CanUnBoundApp'] = ref} name="s_CanUnBoundApp" required>
<option value="Y">Yes</option>
<option value="N">NO</option>
</Input>
</div>
</FormGroup>
<FormGroup>
<div className="row">
<Label htmlFor="s_CanIssue" className="col-md-3">Can Issue Policy:</Label>
<Input type="select" className="col-md-7" id="s_CanIssue" ref={(ref) => this.input['s_CanIssue'] = ref} name="s_CanIssue" required>
<option value="Y">Yes</option>
<option value="N">NO</option>
</Input>
</div>
</FormGroup>
<FormGroup>
<div className="row">
<Label htmlFor="d_EffectiveDateFrom" className="col-md-3">Rule Start Dt.</Label>
<Input type="date" className="col-md-7" id="d_EffectiveDateFrom" ref={(ref) => this.input['d_EffectiveDateFrom'] = ref} name="d_EffectiveDateFrom" placeholder="Rule Start Dt." required />
<span className="text-danger" id="d_EffectiveDateFrom_Error"></span>
</div>
</FormGroup>
<FormGroup>
<div className="row">
<Label htmlFor="d_EffectiveDateTo" className="col-md-3">Rule End Dt.</Label>
<Input type="date" className="col-md-7" id="d_EffectiveDateTo" ref={(ref) => this.input['d_EffectiveDateTo'] = ref} name="d_EffectiveDateTo" placeholder="Rule End Dt." required />
</div>
</FormGroup>
<FormGroup>
<div className="row">
<Label htmlFor="s_RuleStatus" className="col-md-3">Rule Status:</Label>
<Input type="select" className="col-md-7" id="s_RuleStatus" ref={(ref) => this.input['s_RuleStatus'] = ref} name="s_RuleStatus" required>
<option value="ACTIVE">Active</option>
<option value="INACTIVE">InActive</option>
</Input>
</div>
<Input type="hidden" id="n_PrValidationRuleMaster_PK" ref={(ref) => this.input['n_PrValidationRuleMaster_PK'] = ref} name="n_PrValidationRuleMaster_PK" />
</FormGroup>
</CardBody>
<CardFooter>
<div className="text-right">
<Button type="submit" id="ruleFormSubmit" ref={(ref) => this.input['ruleFormSubmit'] = ref} color="primary" onClick={this.submit}><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</div>
</CardFooter>
</form>
</Card>
</div>
</div>
);
}
}
}
const mapStateToProps = state => ({
formOptions: state.Administration.fetchPolicyValidationFormOptions,
ruleForOptions: state.Administration.fetchPolicyRuleForOptions,
ruleForData: state.Administration.fetchPolicyRuleForData,
saveResponse: state.Administration.savePolicyRuleValidation,
innerRules: state.Administration.fetchInnerPolicyRule
});
export default connect(mapStateToProps)(PolicyValidationRuleCreate);
