score:1
i am not sure why you cannot use arrow functions. they have been supported in all browsers for years - and tools like babel (which you can easily configure bundlers like webpack to use) can convert your code to es5 automatically if you really have to support something like ie.
however, if you really can't, you can just use the old "lexical this" trick that arrow functions were designed as a substitute for:
const self = this;
const todoarr = this.state.todos.map(
function(i){
return <todolist key = {i.id} arr = {i} handlechange = {self.handlechange}/>
}
);
note that this.handlechange = this.handlechange.bind(this)
in the constructor doesn't directly help here. (although you do still need it with the above code to make it work.) it's usually used so you can pass this.handlechange
as an event handler and have it use the correct this
- here, the function inside map
already uses its own this
so putting this.handlechange
in the event handler won't refer to the correct thing, even if you bind.
score:1
array.prototype.map()
takes a second argument to set what this
refers to in the mapping function, so pass this as the second argument to preserve the current context. [*]
you can try this:
const todoarr = this.state.todos.map(
function(i){
return <todolist key = {i.id} arr = {i} handlechange = {this.handlechange}/>
}, this
);
Source: stackoverflow.com
Related Query
- How to pass method from one component to another without using Arrow Function?
- How to pass data from one component to another while using API in reactjs
- How to pass function from FUNCTIONAL to CLASS component and access it outside of render( without prop ), using context in react js?
- How to call Child function from Parent / Pass Props to a Parent component without using ref methods?
- How to pass a prop from one component to another when using react router link
- How to pass data from one component to another via a function in ReactJS?
- How can I pass props from one component to another using Link and router in react
- How to pass data from one component to another component in onchange using React js
- How to Pass a value from One Function to Another without Triggering Another Function?
- How can i pass data from one component to another using hooks
- How to pass value from one component to another using onClick in React
- How to pass json data from one component to another using functions in react
- how to pass just the function from one component to other component without passing the whole component or button click
- How to pass props from one component to another using optional handling in react hooks
- How to pass the Like value from one component to another component using reactjs?
- How acess a function from another component without using JSX
- How to pass data from one component to another in React or React-Redux?
- How to pass data from one component to another ReactJS
- React-Router: pass props from one component to another using link
- How to pass function as props from one functional component to another?
- How to pass props of one child component to another child component using parent component
- React-Router: pass props from one component to another using Navlink
- How to pass id from one component to another component onclick of an element
- In React, how do I call a function in one component (which is being rendered with React Router) from another component?
- How to pass the variable from one component to another
- How to pass a parameter from one component to another in Formik?
- How to pass state/data from one component to another in React.js (riot api specifically)
- How to pass props onClicked function in one component to another
- How to pass props from one page using a Link(react-router) to a class component
- How to pass return value from component to another one
More Query from same tag
- Uncaught TypeError: Cannot read property 'data' of undefined with Gatsby and graphQl
- Typescript pass subset implicit
- REACT React how to access the correct "this" after a callback
- React-js ignores label's 'for' attribute
- Get output from user typed code JavaScript
- Typescript: How to defined type of object key for generic type
- how can i sort firebase timestamp data reverse reactjs
- high order component throws an invalid react element error (reactjs)
- async await syntax not catching any error on a jwt verification
- React styled-components navbar styling not working
- Error "Conflict resolver rejects mutation." when Delete in Amplify
- Making UI Components Selectable in ReactJS
- how to create multiple Routes component in reactjs
- Using Internet explorer to run React JS apps
- environment variable undefined in react js
- how to toggle a class on a div in react project for opening a mobile menu in mobile
- How to limit the range of an element?
- Autocomplete - How to put all values in one row
- Primereact datatable: filter null values or template values
- How to override the style or CSS of an Material UI autocomplete options?
- React router switch doesn't match on first load
- change button icon on click react
- adding ReactJS in android Webview
- Filtering and sum data in lodash by two keys
- react err with use setState
- You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux
- Dynamically generate React component names
- React nested components with checkboxes
- JSON format of SVG inside React Component
- Can't contain video using flexgrid Tailwind CSS