score:1
that's because passing this.getstatus
directly to child component will lose its caller (this). instead, you can pass a 'wrapped version' of it.
this closure will preserve caller of getstatus
, thus return correct value.
function square(props) {
return (
<button classname="square"> {props.value} </button>
);
}
class board extends react.component {
rendersquare(i) {
return <square />;
}
render() {
return (
<div classname="status">{this.props.printstatus()}</div>
);
}
}
class game extends react.component {
// constructor
constructor(props) {
super(props);
this.state = {
myprop: 'hi'
}
}
// gets gameplay status
getstatus() {
return this.state.myprop;
}
render() {
return (
<div classname="game">
<div classname="game-board">
<board printstatus={() => this.getstatus()}/>
</div>
</div>
);
}
}
const rootelement = document.getelementbyid("root");
reactdom.render(
<game />,
rootelement
);
<div id="root">
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
score:0
or you can just define getstatus as an arrow function:
getstatus = () => this.state.myprop
check this out: https://medium.com/byte-sized-react/what-is-this-in-react-25c62c31480
score:1
you need to bind this
to the getstatus
function in your constructor
.
constructor(props) {
super(props);
this.state = {
myprop: 'hi'
};
this.getstatus = this.getstatus.bind(this);
}
https://gist.github.com/fongandrew/f28245920a41788e084d77877e65f22f
Source: stackoverflow.com
Related Query
- reactjs Cannot read property 'keys' of undefined
- Axios ReactJS - Cannot read property 'setState' of undefined
- Uncaught TypeError: Cannot read property 'bool' of undefined after upgrade reactjs
- ReactJS - Cannot read property 'preventDefault' of undefined
- TypeError: Cannot read property 'presetToOptions' of undefined in webpack-cli with ReactJs
- Reactjs : TypeError: Cannot read property 'propTypes' of undefined
- Uncaught TypeError: Cannot read property 'func' of undefined in reactjs
- TypeError: Cannot read property 'data' of undefined - can't access Object "props" beyond certain level in Reactjs
- ReactJS Cannot read property setState of undefined
- ReactJs - Uncaught TypeError: Cannot read property 'string' of undefined
- ReactJs browser Cannot read property 'keys' of undefined
- TypeError: Cannot read property 'map' of undefined using ReactJs
- Cannot read property 'map' of undefined with REACTJS
- ReactJS - TypeError: Cannot read property '0' of undefined
- ReactJS ES6 function binding - Uncaught TypeError: Cannot read property 'update' of undefined
- ReactJS Cannot read property 'bind' of undefined
- ReactJS -- TypeError: Cannot read property 'name' of undefined
- ReactJS - Cannot read property 'location' of undefined at new Router
- Cannot read property '0' of undefined - stuck with reactjs tutorial
- ReactJS Uncaught TypeError: Cannot read property 'target' of undefined
- Reactjs TypeError: Cannot read property 'style' of undefined
- Cannot read property 'parentNode' of undefined error in ReactJS Redux form
- Apexcharts - ReactJs - real time - Cannot read property 'filter' of undefined
- Cannot read property of undefined in Reactjs
- Cannot read property 'enqueueSetState' of undefined in ReactJS
- TypeError: Cannot read property 'token' of undefined error in reactjs login page
- Uncaught TypeError: Cannot read property 'Checked' of undefined - ReactJS
- Uncaught TypeError: Cannot read property 'props' of undefined in reactJS
- TypeError: Cannot read property 'focus' of undefined in ReactJS
- reactjs - Uncaught TypeError: Cannot read property 'map' of undefined
More Query from same tag
- React form pass headers to api
- PostMan vs Axios on Including authorization Header while Making requests
- Formik with Yup - Throwing an Exception when using test() function
- Testing with Jest failed with Error: Error watching file for changes: EMFILE
- Material UI AppBar with React Router 4 Implementation not working
- Component does not rerender but redux state has changed via react hooks
- Fractal Project Structure with React and Redux - pros/cons
- ReactJS - Warning: Unknown prop `onTouchTap` on <label> tag. Remove this prop from the element
- JSX: You may need an appropriate loader to handle this file type
- How can I change value of an item into array without modify others in React
- How to add authentication using JWT on a React app?
- How to return state in reducer function during API call
- Can I style only a specific part of an html input's string value?
- Unable to pass state value through react_router4
- How to use Icons like Font Awesome in Gatsby
- How could I put my background image behind a Navbar in react?
- Chart.js Yaxis custom horizontal line and label
- Toggle issue in React Js using Hooks
- Can I use useEffect hook and function component when I need to get the pathname props from Link component?
- How to filter and set the Array items based of DDL Select value change in ReactJS?
- React useState causing "Can't perform a React state update on an unmounted component.." error
- Pass React components as part of an array of other data?
- multi select reactjs handlechange
- How do I change webpack dev server's default port from 8080 to a different port?
- Set state with same value using hooks will cause a rerender?
- Docker app won`t work but application works if not in docker
- Trying to work with openlayers, Golden Layout, reactjs. But openlayers map only show in 1 window of golden-layout not in other
- How to leave space on either side of Navbar MUI
- React + Meteor: this.props is returning undefined
- mobx computed function not re-running when observable value is updated in test