Why am I getting NaN in this React component?

October 20, 2022

<body>
  <div id="root">
    
  </div>
  <script type="text/babel">

    class Count extends React.Component {
        constructor (props) {
            super(props);

            this.state = {count: 0};
            this.props = {increment: 3};
        }

        increase() {
            this.setState((state, props) => ({
              count: state.count + props.increment
          }));
        }

        componentDidMount() {
            this.intervalId = setInterval(() => this.increase(), 1000);
        }

        componentWillUnmount() {
            clearInterval(this.intervalId);
        }

        render() {
            return (
                <h1>Counting: {this.state.count}</h1>
            );
        }
    }

    ReactDOM.render (
                <Count />,
                document.getElementById('root')
        );   

  </script>
</body>

I’m getting "Counting: 0", then "Counting: NaN" after a second. Shouldn’t it be increasing by 3 after every second?

I’m also getting the following warning:

"Warning: Count(…): When calling super() in Count, make sure to pass up the same props that your component’s constructor was passed."

Why? I’m passing the same props to the super().

>Solution :

By doing

this.props = {increment: 3};

you’re confusing React.

Props should not be assigned inside a component. Props should only be passed down from the caller. Either remove that line and do

<Count increment={3} />

or put increment into state instead.

class Count extends React.Component {
    state = { count: 0 };
    increase() {
        this.setState((state, props) => ({
          count: state.count + props.increment
      }));
    }

    componentDidMount() {
        this.intervalId = setInterval(() => this.increase(), 1000);
    }

    componentWillUnmount() {
        clearInterval(this.intervalId);
    }

    render() {
        return (
            <h1>Counting: {this.state.count}</h1>
        );
    }
}

ReactDOM.createRoot(document.querySelector('.react')).render(<Count increment={3} />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>

class Count extends React.Component {
    state = { count: 0, increment: 3 };
    increase() {
        this.setState((state, props) => ({
          count: state.count + state.increment
      }));
    }

    componentDidMount() {
        this.intervalId = setInterval(() => this.increase(), 1000);
    }

    componentWillUnmount() {
        clearInterval(this.intervalId);
    }

    render() {
        return (
            <h1>Counting: {this.state.count}</h1>
        );
    }
}

ReactDOM.createRoot(document.querySelector('.react')).render(<Count />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>