Understand this question might have been asked before, but the solutions haven't worked for me.
Basically when I use any setState in the file, I get the following error for string ref "root", "string" and "svg":
Warning: A string ref, "root", has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef() instead.
I'm also getting this error on submit:
Uncaught TypeError: Cannot read property 'length' of undefined
at 1.chunk.js:89553
at Array.filter (<anonymous>)
at SVGSVGElement.<anonymous> (1.chunk.js:89552)
at 1.chunk.js:37286
at d3_selection_each (1.chunk.js:37293)
at Array.push../node_modules/d3/d3.js.d3_selectionPrototype.each (1.chunk.js:37285)
at Array.chart (1.chunk.js:89521)
at Array.push../node_modules/d3/d3.js.d3_selectionPrototype.call (1.chunk.js:37302)
at e.value (1.chunk.js:184768)
at renderLoop (1.chunk.js:81702)
Here's my code for this particular component:
class CompoundCalculator extends React.Component {
constructor() {
super();
this.state = {
first_depo: 0,
monthly_depo: 0,
years: 0,
r: 0,
total: 0
}
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
var value = target.value;
const name = target.name;
console.log(name, value)
this.setState({
[name] : value
})
}
handleSubmit = (e) => {
let monthly_r = this.state.r / 12;
let compound = [{"x" : 0, "y" : this.state.first_depo}]
for (let yr = 1; yr <= this.state.years; yr++) {
let multiplier = Math.pow(1 + this.state.monthly_r, 12 * yr);
let compound_principal = this.state.first_depo * multiplier;
let compound_monthly = this.state.monthly_depo * (multiplier - 1) / monthly_r;
compound.push({
'x': yr,
'y': compound_principal + compound_monthly
});
}
e.preventDefault()
console.log(compound)
this.setState({total: compound})
}
render() {
return (
<Container>
<Row style={{width: "93vw"}}>
<Col>
<Card className='card-event center'>
<Card.Body>
<Form>
<Row>
<Col>
<Form.Group controlId="first_depo">
<Form.Label>First Deposit:</Form.Label>
<Form.Control type="number" onChange={this.handleInputChange} name="first_depo"></Form.Control>
</Form.Group>
</Col>
</Row>
<Row>
<Col>
<Form.Group controlId="monthly_depo">
<Form.Label>Monthly Deposit:</Form.Label>
<Form.Control type="number" onChange={this.handleInputChange} name="monthly_depo"></Form.Control>
</Form.Group>
</Col>
</Row>
<Row>
<Col>
<Form.Group controlId="year">
<Form.Label>No. Years:</Form.Label>
<Form.Control type="number" onChange={this.handleInputChange} name="years"></Form.Control>
</Form.Group>
</Col>
</Row>
<Row>
<Col>
<Form.Group controlId="r">
<Form.Label>r:</Form.Label>
<Form.Control type="number" onChange={this.handleInputChange} name="r"></Form.Control>
</Form.Group>
</Col>
</Row>
<Button id="submit" variant="primary" type="submit" onClick={this.handleSubmit}>Calculate</Button>
</Form>
</Card.Body>
</Card>
</Col>
<Col>
<Card style={{height: "84vh"}}>
<Card.Body>
<h3 className='mb-4'>Growth Potential</h3>
{
this.state.total &&
<div>
{
React.createElement(NVD3Chart, {
xAxis: {
tickFormat: function (d) { return d },
axisLabel: 'Date',
},
yAxis: {
axisLabel: 'Price ($ m)',
tickFormat: function (d) { return d; }
},
type: 'lineChart',
datum: this.state.total,
x: 'x',
y: 'y',
height: 300,
width: 400,
renderEnd: function () {
console.log('renderEnd');
}
})
}
</div>
}
</Card.Body>
</Card>
</Col>
</Row>
</Container>
);
}
}
export default CompoundCalculator;
Could this problem be caused by the NVD3Chart I'm using?