TypeError: Cannot read property 'bind' of undefined in React.js, how to fix?

Question

React

Hello,
when starting the application, an error occurs: TypeError: Cannot read property 'bind' of undefined
, the browser swears at the line: this.NewTask = this.NewTask.bind(this);
here is my code:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import styled from 'styled-components';

import Button from './components/Button';
import AddTaskInput from './components/Input';
import MainHeader from './components/Header';
import Task from './components/Task';
class App extends Component {
    constructor(props) {
        super(props);
        this.state = { 
           items: 'Новая задача'
        }
 
        this.NewTask = this.NewTask.bind(this);
    } 
    render() {
        return (
            <div className="App">
                <HeaderWrapper>
                    <MainHeader />
                </HeaderWrapper>
                <Wrapper>
                    <AddTaskInput />
                    <Button onClick={this.NewTask} text="Add" />
                </Wrapper>
                <TasksWrapper>
                    <Task taskName={this.state.items}/>
                </TasksWrapper>
            </div>
        );
    }
}

export default App;

Here is the Button class code:

import React, { Component } from 'react';
import styled from 'styled-components';

class Button extends React.Component {
    render () {
        return (
            <StyledButton>{this.props.text}</StyledButton>
        );
    }
}
export default Button;

I'm new to react and this is the first time I've encountered this kind of error. I would be very grateful if you could help

Answer 1

The App component is missing the NewTask method you are trying to access in the constructor.
Throw onClick into the Button component:

class Button extends React.Component {
  render () {
    const { text, onClick } = this.props;

    return <StyledButton onClick={onClick}>{text}</StyledButton>;
  }
}

Answer 2

NewTask is a function that you have not implemented. or remove this.NewTask = this.NewTask.bind(this); or

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import styled from 'styled-components';

import Button from './components/Button';
import AddTaskInput from './components/Input';
import MainHeader from './components/Header';
import Task from './components/Task';
class App extends Component {
    constructor(props) {
        super(props);
        this.state = { 
           items: 'Новая задача'
        }
 
        this.NewTask = this.NewTask.bind(this);
    } 

NewTask(){

}
    render() {
        return (
            <div className="App">
                <HeaderWrapper>
                    <MainHeader />
                </HeaderWrapper>
                <Wrapper>
                    <AddTaskInput />
                    <Button onClick={this.NewTask} text="Add" />
                </Wrapper>
                <TasksWrapper>
                    <Task taskName={this.state.items}/>
                </TasksWrapper>
            </div>
        );
    }
}

export default App;