Why doesn't bind?

A simple React component
import React from "react";
Task import from "./task.jsx";

export default class Board extends React.Component{
constructor(props){
super(props);

 this.state = {
 taskList: this.props.data
};
 this.test = this.test.bind(this);

console.log(this.test());
}

test(){
console.log(this);
}


render(){
 let temp = this.state.taskList.map(function(item, index){
 return <task data="{item}" key="{index}" handle="{this.test}/">
});

 return <div classname="board">
{temp}
</div>;
}
}</task>


The problem is that bind does not bind this to a method "test" in the console displays "Cannot read property 'test' of undefined" when trying to pass a method to another component via props. Thanks in advance!
June 27th 19 at 14:52
2 answers
June 27th 19 at 14:54
Solution
Use Bezymyannyi functions.
Oh I'm blind sheep xD. Thank you very much) - glennie.Bernha commented on June 27th 19 at 14:57
: let me remind you that this version of bind is not needed. - arnold2 commented on June 27th 19 at 15:00
nameless - Dianna.Harris commented on June 27th 19 at 15:03
June 27th 19 at 14:56
Solution
Props to maintain the component in its local state - the anti-pattern.
Nothing if this.props.data defined as default props(will not change), but in most cases it will be(coming from the parent state or from a global location, i.e. store).
When this.props.data will be updated, the local state will remain the same. Will have to pull componentWillRecieveProps.
Data transmitted as props almost always have somewhere stored ( in the parent or in store ).
Roughly speaking, they were already watching. There is no need to resave them in drcom component.

You cannot write well , handle = {this.test}. Spaces should not be.

Given all the above, a component can be rewritten as follows

export default class Board extends React.Component {
 test = () => {
console.log(this)
}

render(){
 const temp = this.props.data.map((item, index) => 
 <task data="{item}" key="{index}" handle="{this.test}">
)

 return <div classname="board">{temp}</div>
}
}</task>

Find more questions by tags ReactJavaScript