score:16
Accepted answer
by using function
you sort of lose the context and this
is not the one you were expecting.
in this case, either use arrow function as:
render() {
createmenuitems = (items) => {
console.log(this.state.menuselected)
...
}
}
or, and here comes my suggestion, move createmenuitems
outside of render
method:
createmenuitems = (items) => {
console.log(this.state.menuselected)
}
render() {
return (
<nav id='sidebar'>
<ul classname='list-unstyled'>
{menumenuoptions.menuitems.map((menuitem, index) =>
this.createmenulistitem(menuitem)
)}
</ul>
</nav>
)
}
binding it in the constructor is also a possibility:
class yourcomponent extends react.component {
constructor(props) {
super(props)
this.state = {
menuselected: '',
}
this.createmenulistitem = this.createmenulistitem.bind(this)
}
createmenulistitem() {
console.log(this.state.menuselected)
}
render() {
return (
<nav id='sidebar'>
<ul classname='list-unstyled'>
{menumenuoptions.menuitems.map((menuitem, index) =>
this.createmenulistitem(menuitem)
)}
</ul>
</nav>
)
}
}
Source: stackoverflow.com
Related Query
- React setState inside of a function this is undefined
- react state is undefined inside the function
- Using arrow functions inside React component does not transfer over parent context (which exists). this remains undefined in arrow function
- React TypeError: " this is undefined ", function inside function call not working
- 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 : Access Component state inside a static function
- export function inside react component or access state in same file outside of component
- How do I pass a React Context's state through an onClick function created in a method inside that context class?
- this.state is undefined inside function - React JS
- React Hooks - function inside function component passed as prop can't access state
- Why is the state not updating inside this react Hooks component?
- React Hook: Access to state inside an external function
- how to set react parent component state by a async function and then pass this state to child as props?
- React state is undefined with binded function
- React hooks: Can't update state inside function component
- React Setting state inside of a function
- React hooks not returning updated state values inside callback function from library events (FabricJS)
- "this" is undefined inside an anonymous function returned by another function React
- Debugger inside React Context API Consumer block - this is undefined
- React hooks state undefined on handle function
- How to Use State inside the function in React JS?
- updated state value are not updated inside function in react
- how do i update state in react for updating the value of an object inside an array using array.map function
- React - this is undefined when binding function to component
- Getting this error "Invalid hook call. Hooks can only be called inside of the body of a function component." inside a react functional component?
- React state inside a function is not changing even after calling it with a delay of (5 seconds)
- Updating a state inside a React function
- State nulls out inside render function in React
- Changing state inside async function in React
- state won't update inside react function component
More Query from same tag
- Filtering elements from table onClick using react
- How to add list to list in Immutable.js?
- Enable scrollbar on div tag of HTML whenever browser size is reduced & data overflows using CSS / JSS
- How to define interfaces in TypeScript to pass the props correctly?
- Changing state of third party React component from parent
- override useState variable when it is used in useEffect
- How to change specific properties on object array?
- ReactJS 16.13.1 Hook incoherent state in listener
- React default props for array property in required object
- How to combine style properties in ReactJs
- I am not able to change the state when I send an input by using a form
- React: update URL query params on language change
- material-ui-search-bar as Styled Component
- How do I pass down components spread props with TypeScript?
- Running webpack-dev server through express
- How use Local Storage in Functional Component React
- Pull to Refresh and setState not working - React Native
- shouldComponentUpdate() is not being called
- Condition with React Hooks
- Cleanup method is not working in react testing library
- React Hook useEffect has a missing dependency in reactjs useEffect
- POST request works in localhost but not working after deploying to the google cloud
- Detect network connection in React Redux app - if offline, hide component from user
- ics description ignores everything after #(hash) symbol - ics.js
- Programmatically create multiple types of pages in Gatsby.js
- set background image through function or variable
- React single page scroll to anchor without router or navigation uri
- Sharing components between two react apps
- Gatsby/React - Get Referring Url
- Erorr with post request