I can't find any info regarding a situation like this, I'm passing p1 props from my App component to state of my Child1 component.
When I call the buttonHandler method to see the state of s1 I get this error:
Child1.js:27 Uncaught TypeError: Cannot read properties of undefined (reading 'state')
Class component "Child1"
import React from "react";
import { setState } from 'react'
class Child1 extends React.Component {
constructor(props) {
super(props)
this.s2 = 0
this.state = {
s1: this.props.p1
}
console.log(this.state.s1);
}
componentDidMount() {
// console.log('componentDidMount()')
console.log('s2 = ' + this.s2);
this.s2 += 1
this.setState(() => ({
s1: this.props.p1 + 1
}))
}
buttonHandler() {
console.log(this.state.s1);
}
render() {
return (
<>
<div>
<h3>State s1</h3>
<h4>{this.state.s1}</h4>
</div>
<hr />
<div>
<h3>props from p1 to s2</h3>
<h4>{this.s2}</h4>
</div>
<hr />
<div>
<button onClick={this.buttonHandler}>Push</button>
</div>
</>
)
}
}
export default Child1
App.js
import './App.css';
import Child1 from './Child1';
function App() {
return (
<>
<Child1 p1={88} />
</>
)
}
export default App;
With class instances, you need to bind the function to the component instance:
// Use arrow syntax (recommended) or bind in the constructor
buttonHandler = () => {
console.log(this.state.s1);
};
There are 3 problems with the above code:
buttonHandler method)setState (in componentDidMount)For the event listener binding, as seen in Dennis Valsh's answer:
buttonHandler = () => {
console.log(this.state.s1);
};
To initialize state with props, its better to use getDerivedStateFromProps.
static getDerivedStateFromProps(props, state) {
return {s1: props.p1 + 1};
}
To update state using props, use the callback argument of setState. (See https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous)
setState((state,props) =>{
return {s1: props.p1 + 1};
}
However, since what you're trying to do isn't very clear, I'd say you don't need the componentDidUpdate at all & the getDerivedStateFromProps is sufficient.