React TypeError: Cannot read property send_Data_to_Api of undefined

×

TypeError: Cannot read property 'send_Data_to_Api' of

onClickSubmit

D:/Programmierung/Web/CodeDocu_de/CodeDocu/ClientApp/src/components/Edit.js:55

  52 | //====< functions >====
  53 | onClickSubmit(event) {
  54 |     event.preventDefault(); //stops a href=url
> 55 |     this.send_Data_to_Api();
     | ^  56 |     //alert('you clicked me');
  57 |     //later:browserHistory.push('/');
  58 | }

    onClickSubmit(event) {

        this.send_Data_to_Api();       

    }

this.onClickSubmit = this.onClickSubmit.bind(this); //for using this.function() in component

import React, { Component } from 'react';

import './Edit.css';

import "bootstrap/dist/css/bootstrap.min.css";

//import { browserHistory } from 'react-router'

import Fab from '@material-ui/core/Fab';

import RemoveRedEye from '@material-ui/icons/RemoveRedEye';

import TextField from '@material-ui/core/TextField';

import { Link } from 'react-router-dom'

export class Edit extends Component {

    //--------< component: Article >--------

    //----< compontent >----

    baseURL = "/";

    constructor(props) {

        //-< react: parameter >

        super(props);

        //-</ react: parameter >

        //--< react: variables >--

        this.state = {

            idarticle: 0,

            IDUser: "",

            title: "",

            TextContent: "",

            HtmlContent: "",

            Folder: "",

            Keywords: "",

            nImages: "",

            nVideos: "",

            nFiles: "",

            DtCreated: "",

            DtEdit: "",

            loading: true,

            status: ""

        }

        this.onClickSubmit = this.onClickSubmit.bind(this); //for using this.function() in component

    }

    //--< component.events >--

    componentDidMount() {

        this.get_Data_from_Api(this.props.match.params.id);

    }

    //--</ component.events >--

    //----</ compontent >----

    //====< functions >====

    onClickSubmit(event) {

        this.send_Data_to_Api();       

    }

    //*load data from web api

    async get_Data_from_Api(id) {

        //--------< populateData() >--------

        const response = await fetch('api/articles/' + id);   //*get web_data from web api as json-string

        const data = await response.json();             //*convert json to data

        //console.log("this.state=" + this.state);

        //console.log(this.state);

        this.setState(state => ({

            idarticle: data.idArticle,

            iduser: data.idUser,

            title: data.title,

            textcontent: data.textContent,

            htmlcontent: data.htmlContent,

            folder: data.folder,

            keywords: data.keywords,

            nimages: data.nImages,

            nvideos: data.nVideos,

            nfiles: data.nFiles,

            dtcreated: data.dtCreated,

            dtedit: data.dtEdit,

            loading: false,

        })); //*refresh state of arcticles

        //--------</ populateData() >--------

    }

    async send_Data_to_Api() {

        //const id = this.state.idarticle;

        //const requestOptions = {

        //    method: 'PUT',

        //    headers: { 'Content-Type': 'application/json' },

        //    body: JSON.stringify(

        //        {

        //            title: this.state.title,

        //        })

        //};

        //const response = await fetch('api/articles/' + id, requestOptions);

        //const data = await response.json();

        //this.setState({

        //    idArticle: data.id,

        //    status: "data is send"

        //});

        alert('Data are send');

    }

    //====</ functions >====

    //====< HTML >====

    //----< render >----

    render() {

        //--------< render(HTML) >--------

        document.title = "✍ " + this.state.title;

        return (

            //----< return >----     

            <div className="submit-form">

                {

                    //--< IsLoaded >--

                    <form className="submit-form">

                        <div>

                            <Link href="/" onClick={this.onClickSubmit}>

                                <Fab color="secondary" aria-label="save and show" style={{ float: 'right' }} >

                                    <RemoveRedEye />

                                </Fab>

                            </Link>

                            <TextField

                                id="ctltitle"

                                label="Title"

                                type="text"

                                placeholder="Title"

                                autoComplete

                                required

                                fullWidth

                                color="primary"

                                InputLabelProps={{

                                    shrink: true,

                                }}

                                value={this.state.title}

                                onChange={(e) => { this.setState({ title: e.target.value }) }}

                                style={{ width: '100%' }}

                            />

                            <div style={{ marginTop: '10px' }}>

                                <button type="submit">Update</button>

                            </div>

                        </div>

                        <input type="hidden" value={this.state.idarticle} />

                    </form>

                    //--</ IsLoaded >--

                }

            </div>

            //----</ return >----

        );

        //--------</ render(HTML) >--------

    }

    //----</ render >----

    //====</ HTML >====

    //--------</ component: Articles >--------

}

    //event.preventDefault(); //stops a href=url

    //later:browserHistory.push('/');