score:27
your problem is scoping.
the this
that you're trying to access inside the txt()
function is pointing to its own this
, and not the outer component this
.
there are several ways to fix this. here's a few:
use arrow functions
you can transform txt
into an arrow function to use the outer this
:
render() {
const txt = (n) => {
return this.state.bar[this.state.foo][n];
}
return (
<view>
...
</view>
);
}
you can bind the function to use the outer this
render() {
function _txt(n){
return this.state.bar[this.state.foo][n];
}
const txt = _txt.bind(this);
return (
<view>
...
</view>
);
}
you can create an additional variable that points to the outer this
render() {
const self = this;
function txt(n){
return self.state.bar[self.state.foo][n];
}
return (
<view>
...
</view>
);
}
other approaches
- you can move the
txt
function to outside of the render function and bind it to the componentthis
. - you can use an arrow function inside the component class block, which will seem like you've bound it to the component's
this
. - you can pass the state as a parameter to the function
...and i'm sure that there are several other ways to fix this behaviour. you just need to know when you're using the component's this
or some other this
.
score:1
a few issues here. first, you need to bind the text
function to the class in the constructor. you also need to move the text
function out of the render method and add it as a class method (no function
in front of function name):
import react,
{ component }
from 'react';
import {
...
} from 'react-native';
export default class app extends react.component {
constructor () {
super();
this.state = {
foo: 'abc',
bar: {
'abc': [
'...',
'...',
'...'
]
}
};
this.text = this.text.bind(this);
}
text (n) {
return this.state.bar[this.state.foo][n];
}
render() {
return (
<view>
...
</view>
);
}
}
Source: stackoverflow.com
Related Query
- Cannot access State inside Function
- Cannot access value of state inside function body that's inside component
- Cannot access state variable inside function
- React Native : Access Component state inside a static function
- export function inside react component or access state in same file outside of component
- React, can't access updated value of state variable inside function passed to setInterval() in useEffect()
- React Hooks - function inside function component passed as prop can't access state
- React Hook: Access to state inside an external function
- Cannot access this.setState or this.state inside Ant Modal confirm ok/cancel function
- Cannot access geolocation inside of function
- How to access to new state of useReducer inside custom hook's function
- Cannot access props from function inside React Component
- Cannot access state due to function called in mapStateToProps
- Cannot access array inside of map function to return props to different component
- Not able to access react State inside a function
- How to access state from another function inside React useEffect
- Updating What Function is returning Which is Inside Render Warning: Cannot update during an existing state transition reactjs
- Cannot access state inside callback
- How to access state inside function which is inside of function inside of map
- How to access state inside Redux reducer?
- React Warning: Cannot update a component from inside the function body of a different component
- Can i have a function inside a state in react?
- React hook form v7 Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()
- Why can't I access state and props inside event handler
- Can I access state inside a createAsyncThunk w/axios with redux toolkit?
- Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state. in Index.js
- react-native - can't access setState inside component function
- Access old state to compare with new state inside useEffect react hook with custom hooks usePrevious
- React: How to add onChange functionality inside of Function component using React Hooks? Need onClick event from a checkbox to influence input state
- React-Native: Cannot access state values or any methods declared from renderRow
More Query from same tag
- How to use theme in styles for custom class components
- adding service worker to reactjs app
- CSS Module Overriding UI Styling
- Material-UI styles ThemeProvider Error: TypeError: Cannot read property 'primary' of undefined
- how to send data from android application running on kotlin to a react js application which is opened on webview?
- How to generate array of object from object
- React Router 4 - Component Remounting Instead of Re-Rendering
- Versioning bundle file
- Invalid hook calls - react - material-ui
- Property 'element' does not exist on type 'JSX.IntrinsicElements'
- Set Typography text color in MUI
- reactfire React+firebase "contains an invalid key (.key) in property"
- How to call Parent containers function from child component in Reactjs
- React build error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
- Uncaught Error: Parse Error: Unexpected token
- What type is register from react-hook-form?
- How to use router.replace inside the client side of your app?
- Type Error. Cannot react property '0' undefined
- TypeError: this.state.screams. is not a function react js with fire base
- How do i add functionality to my nav dots in my image slider?
- Why does the received state disappear in a moment?
- Problems with yarn in docker-compose
- Passing a value back to the parent from a form
- How to make list of checkboxes controlled in loop in react
- React Hook useState Constructor with Asyncstorage
- React Node authentication
- Header keys become lowercase when interacting with API - React native
- Passing refs from Component to Component in React
- React Transition Group: How to pass ref to mapped component to avoid Warning: findDOMNode is deprecated in StrictMode
- How to declare values to initialize the state of an array?