I’m getting this error in the browser when I try and set the state interval to update my prices. No compilation errors were thrown in the console.
“Received NaN for the children attribute. If this is expected, cast the value to a string.”
componentDidMount() {
const callback = () => {
const randomPercentage = 0.995 + Math.random() * 0.01;
this.setState(function(oldState) {
return {
price: oldState.price * randomPercentage
};
});
}
setInterval(callback, 1000);
}
Hi @kmatth007,
Probably it is a run time warning. I cannot understand or debug your code with only one specific snippet of code. Since React has a lot of moving parts, it only helps when you share most of the code with us. Or better yet, the entire repository.
Happy learning!
Thank Malik I figured it out. I did not have the props set correctly. I had price =“10000” instead of price= {10000} so it was trying to do the math calculation on a string and not a number.
Awesome. Keep up the good work mate.
Hi, I have an issue over here.
I’m doing the part of changing the state of coin’s price but throw me this error on console.
( Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. )
This is my code.
import React, { Component } from 'react';
import './Coin.css';
import PropTypes from 'prop-types';
export default class Coin extends Component {
constructor(props){
super(props);
this.state = {
price: this.props.price
}
}
componentDidMount(){
const callback = () => {
const randomPercentage = 0.995 + Math.random() * 0.01;
this.setState( function(oldState) {
return{
price: oldState.price * randomPercentage
}
});
}
setInterval(callback, 1000);
}
render() {
return (
<tr className='coin-row'>
<td>{this.props.name}</td>
<td>{this.props.ticker}</td>
<td>${this.props.price}</td>
<td><button>Refresh</button></td>
</tr>
)
}
}
Coin.propTypes = {
name: PropTypes.string.isRequired,
ticker: PropTypes.string.isRequired,
price: PropTypes.number.isRequired
}
react-dom.development.js:
Warning: Invalid DOM property `class`. Did you mean `className`?
at tr
at Coin (bundle)
at tbody
at table
at div
at App
i have this error and wont update prices at all in the video it shows a refrresh and the prices start to update however i dont see them update
any suggestions please
componentDidMount() {
const callback = () => {
// set the state to a new random value
const randomPercentage = 0.995 + Math.random() / 0.01;
this.setState( function(oldState) {
return {
price: oldState.price = randomPercentage
};
});
}
setInterval( callback, 1000 );
}
render() {
return (
<tr class="coin-row">
<td>{this.props.name}</td>
<td>{this.props.ticker}</td>
<td>${this.props.price}</td>
</tr>
);
}
}
Coin.propTypes = {
name: PropTypes.string.isRequired,
ticker: PropTypes.string.isRequired,
price: PropTypes.number.isRequired,
}
here is my code
in react we use JSX, not actual HTML. when your using JSX if you want to put a class on a div you use className="flex justify-content: center" etc and not class="flex justify-content: center". however this is not an error but only a warning. so the source of your bug is from somewhere else in your code, most likley a state managment bug
this is a common error is react and can be really hard to debug as your application grows because it doesnt give you a good indication of where the error is occuring from the message alone. this error usually comes up when you have a parent component (say your page for example). consider the example where you have a modal which is a child component of this page. lets now imagine your passing some prop down to this modal. if the state or value of that props is to change before your modal component mounts (or in other words while its closed on initial page load), you will get this error. there are clever ways you can handle this with. the version of react in this course is old. I use react 18 where instead of componentDidMount you have useEffects, where you can limit the rendering of a state with different dependancies and confitions. there are also other hooks like useMmemo and useCallback that are commonly used to properly manage an applications state as it get smore and more complex
thanks for the reply
the trouble i seem to be also finding is in the task the pricing isnt updating but i see the callback complete
thanks