score:1
that's expected because state needs to be defined before using. the common way with es6 classes is to define initial state from within constructor, a such:
class mycmp extends react.component {
constructor() {
super(); // don't forget to call superclass constructor
this.state = {foo: 1};
}
componentdidmount() {
console.log(this);//1
console.log(this.state);//2
}
}
if you use proposal-grade javascript (e.g. if you have stage-0 or some other stage number as a profile in your babel configuration), then you can define it as a class property too:
class mycmp extends react.component {
state = {
foo: 1
};
componentdidmount : function() {
console.log(this);//1
console.log(this.state);//2
}
}
if you don't use es6 classes, you would do something like:
var mycmp = react.createclass({
getinitialstate: function() {
return {
foo: 1
}
},
componentdidmount : function() {
console.log(this);//1
console.log(this.state);//2
}
}
i hope that helped. enjoy react!
Source: stackoverflow.com
Related Query
- Why is this React component state recognized in the JSX return() for the first <p> but not for the second <p>?
- "this" avaialable but "this.state" not available
- My redux app needs state to be updated before it can contact the server, but this is not allowed in redux
- react routing is able to handle different url path but tomcat returns 404 not available resources
- Is it possible to only run useEffect on props change, but not state change?
- react component state change after ajax call but does not rerender component
- onMouseDown event in react does not trigger state changes but onClick does
- Firebase auth state persists on client, but not on hard refresh
- Component does not rerender but redux state has changed via react hooks
- Reactjs prop available in render but not in componentDidMount
- setInterval updating state in React but not recognizing when time is 0
- Redux - State is updating but React components are not
- this.state not the same as state in this object
- Redux: Action was successfully dispatched but the State was not created
- Tryning to secure a front End react page with keycloak server but i have this error 'keycloak.init(...).then is not a function'
- React redux - parent state changing, but child components not re-rendering
- Why is the state not updating inside this react Hooks component?
- React Hooks State update one step behind. For this reason my changes are not working correctly
- data is fetched but the state is not updated
- Axios not updating state from API in function called on Click, but works on identical function on Component Mount in React
- state in redux store change but component not change in view
- Formik reset form, not to the initial state but a new one
- Changing state but not rerendering react redux
- REACT + REDUX: on redux state change mapStateToProps updating state but view is not rendering as per new state
- Passing state after .setState() to child component but not showing up in this.props for child component
- Jest mock function is called. but the mock's state is not updated?
- React- this shows populated state but this.state is empty
- In react class component why is the state not being changed in the first instance of button click? But in the second instance it gets updated?
- React Button Click Event Update State Value But Not Reflected on Button Text
- Link to changes state but does not change URL
More Query from same tag
- how do you prevent functions inside useEffect from being triggered more than once?
- socket.io connect issue
- MouseEnter/MouseOver doesn't work with react-testing-library. How to test hover events with react-testing-library
- React State Shows False When True Is Expected
- React-Reudx: Actions must be plain objects. Use custom middleware for async actions
- redux container component without a class
- Images are loading okay on a Chrome tab, but returning 403 in React code
- Update UI using Custom Hook
- Property not exsisting on a type in React with TypeScript
- how to set the variable in the ReactDOM.render?
- Reactjs add onClick attribute on a dynamic element
- RxJS state management
- Use Redux module inside react component
- React Rails: Rendering an html.erb file in React js.jsx
- Axios post does not send data
- HTML input not updating on paste
- Cannot import ES2015 module
- Prevent Menu From Closing When User Clicks the Input
- SyntaxError: Unexpected identifier {import React from 'react';
- Trouble on creating a Component wrapper using styled-component and TypeScript
- Uncaught SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse (<anonymous>) at ./src/context/AuthContext.js
- Can a component know its own DOM tree context?
- eslint vscode plugin is not producing warnings for hooks
- Highchart- OnClick event, get "category" and "name" from stacked bar chart
- How to show a component and a variable within the true case in a ternary in React/jsx?
- React Konva center text in square
- Change element content with onClick in React
- How to use breakpoints in Theme definition itself
- cannot read property of undefined (trying to access property before initialization)
- how to set a nested object in React Hooks