score:0
i think there is no need to bind methods/functions in the constructor instead do this
return (
<basics key={i}
index={i}
upcomment={()=>this.updatecomment()}
delcomment={()=>this.removecomment()}>
{text}
</basics>)
while assigning the props wrap your functions into anonymous functions it may help i didn't try this.
score:0
one issue is that .bind()
call at global attribute event would result in function () { [native code] }
instead of the function call, and this
is the global object, for example window
.
one approach would be to define edit
and remove
as static
methods and use the class
as a reference
class test {
constructor() {}
static edit() { console.log("edit") }
rendernormal() {
const button = `<div onclick="test.edit()">click</div>`;
document.body.insertadjacenthtml("beforeend", button);
}
}
new test().rendernormal()
score:1
your function name is updatecomment
while defining the function but when you're binding the context of the class to the function, the name you're using is upcomment
(class manage
, 3rd line in it's constructor
) which is why you're getting the error.
score:2
there are multiple errors in your code that needed solving.
- the bind error is because
upcomment
does not exist in your code. what you should bind is the function itself (updatecomment
) and not the prop name. if you are using
this
variable inside any function, it needs to be bound. this is the case inrendernormal
andrenderform
.when you are using
this
inside the render function of manage, you were using an anonymous callback. but thenthis
would bind to this callback rather than the class function. changing this to a arrow function works.
class basics extends react.component {
constructor() {
super();
this.state = { editing: false };
this.rendernormal = this.rendernormal.bind(this);
this.renderform = this.renderform.bind(this);
}
edit() {
this.setstate({ editing: true });
}
save() {
this.setstate({ editing: false });
this.props.upcomment(this.refs.newtext.value, this.props.index);
}
remove() {
this.props.delcomment(this.props.index);
}
rendernormal() {
return (
<div>
<div classname="commenttext">{this.props.children}</div>
<button onclick={this.edit.bind(this)} classname="button-primary">edit</button>
<button onclick={this.remove.bind(this)} classname="button-danger">remove</button>
</div>
)
}
renderform() {
return (
<div>
<textarea ref='newtext' defaultvalue={this.props.children}></textarea>
<button onclick={this.save.bind(this)} classname="button-success">save</button>
</div>
)
}
render() {
if (this.state.editing) {
return this.renderform();
} else {
return this.rendernormal();
}
}
}
class manage extends react.component {
constructor(props) {
super(props);
this.removecomment = this.removecomment.bind(this);
this.updatecomment = this.updatecomment.bind(this);
this.state = {
comments: [
'this is a first comment',
'hi there!',
'i am learning react'
]
}
}
removecomment(i) {
console.log(i);
var arr = this.state.comments;
arr.splice(i, 1);
this.setstate({ comments: arr })
}
updatecomment(newtext, i) {
var arr = this.state.comments;
arr[i] = newtext;
this.setstate({ comments: arr })
}
render() {
return (
<div classname="board">
{this.state.comments.map((text, i)=> {
return (
<basics key={i} index={i} upcomment={this.updatecomment} delcomment={this.removecomment}>
{text}
</basics>)
}
)}
</div>
)
}
};
reactdom.render(<manage />, document.getelementbyid("example"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="example"></div>
Source: stackoverflow.com
Related Query
- React - uncaught TypeError: Cannot read property 'setState' of undefined
- react router v^4.0.0 Uncaught TypeError: Cannot read property 'location' of undefined
- React with ES7: Uncaught TypeError: Cannot read property 'state' of undefined
- React enzyme testing, Cannot read property 'have' of undefined
- Cannot read property 'history' of undefined (useHistory hook of React Router 5)
- React - TypeError: Cannot read property 'props' of undefined
- React Router: Cannot read property 'pathname' of undefined
- React Typescript: Line 0: Parsing error: Cannot read property 'name' of undefined
- Cannot read property '.then' of undefined when testing async action creators with redux and react
- React Tutorial: TypeError: Cannot read property 'props' of undefined
- TypeError: Cannot read property 'javascript' of undefined + terser webpack plugin + react js
- React Material-UI Modal TypeError: Cannot read property 'hasOwnProperty' of undefined
- How to test form submission in React with Jest and Enzyme? Cannot read property 'preventDefault' of undefined
- React propType cannot read property of undefined
- React cannot read property map of undefined
- TypeError: Cannot read property 'prototype' of undefined React Express
- TypeError: Cannot read property 'error' of undefined on React Chrome Extension
- mocha + jsdom + React TypeError: Cannot read property 'addEventListener' of undefined
- React - Cannot read property 'call' of undefined
- Cannot read property 'forEach' of undefined in React
- Cannot read property 'call' of undefined Webpack Bootstrap React
- Uncaught TypeError: Cannot read property 'toUpperCase' of undefined react state item
- Cannot read property 'map' of undefined with react hooks
- Cannot read property 'map' of undefined in React
- React Redux: Cannot read property 'dispatch' of undefined
- React Jest test Cannot read property 'pathname' of undefined
- React Redux Cannot read property 'dispatch' of undefined
- React - Uncaught TypeError: Cannot read property 'func' of undefined
- react / redux - cannot read property "yyy" of undefined
- Cannot read property of undefined when using react hooks
More Query from same tag
- React + Typescript: How can I dynamically set a generic interface for a function?
- MUI input does not center title when clear through react reference?
- Hook useState with useEffect
- how to compare two specific elements from two different Arrays in JavaScript
- React Hooks : TypeError: Cannot read property 'firstName' of null
- npx create-react-app my-app command gives an error
- React: re-fetch data in parent component when child component form submits
- get checked value of ToggleButton (react-bootstrap) using refs in react
- How to create one Custom MUI Color palette for whole App?
- Rendered fewer hooks than expected. This may be caused by an accidental early return statement
- Next js routing triggers useEffect
- Additional Arguments to Styled Components in React with Typescript
- Firebase collection
- How to center a container/item in a complex grid with material ui
- Spreading in a `useEffect` casuing huge number of rerenders
- How to create a controlled form in react that allows upper case letters only?
- Can anyone tell me why this setinterval keeps getting shorter and short
- Accessing a state with dynamic key name in Typescript
- Toggling checkboxes in React
- GET request works with Postman but why doesn't it work with ReactJS fetch?
- passing all props with class and stateless component
- Set up proxy server for create react app
- Cannot use import statement outside a module @emotion
- property 'yyy' does not exist on type 'readonly<{}>'
- How Refs works on react 0.14
- react-script: Transpiling Third party JSX files
- How to navigate from one page to another with Airtable.com reactjs
- React Table - new order after filtering
- How to use a constant in map return function ReactJS
- Snapshot Testing With Jest, React and Redux