Trying to submit a form in react, I get this error in the handlesubmit

TypeError: Cannot read property 'append' of undefined
_class.handleSubmit
src/containers/RegisterTenant/register.js:37
  34 | 
  35 | handleSubmit(event){
  36 |   event.preventDefault();
> 37 |   this.data.append("TenantId", this.state.tenantid);
  38 |   this.data.append("TenanrUrl", this.state.tenanturl);
  39 |   this.data.append("TenantPassword", this.state.tenantpassword);

my code is

import React, { Component } from 'react';

import { Row, Col } from 'antd';
import PageHeader from '../../ponents/utility/pageHeader';
import Box from '../../ponents/utility/box';
import LayoutWrapper from '../../ponents/utility/layoutWrapper.js';
import ContentHolder from '../../ponents/utility/contentHolder';
import basicStyle from '../../settings/basicStyle';
import IntlMessages from '../../ponents/utility/intlMessages';
import { adalApiFetch } from '../../adalConfig';

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {TenantId: '',TenanrUrl:'',TenantPassword:''};
    this.handleChangeTenantUrl = this.handleChangeTenantUrl.bind(this);
    this.handleChangeTenantPassword = this.handleChangeTenantPassword.bind(this);
    this.handleChangeTenantId= this.handleChangeTenantId.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  };


  handleChangeTenantUrl(event){
    this.setState({tenanturl: event.target.value});
  }

  handleChangeTenantPassword(event){
    this.setState({tenantpassword: event.target.value});
  }

  handleChangeTenantId(event){
    this.setState({tenantid: event.target.value});
  }

  handleSubmit(event){
    event.preventDefault();
    this.data.append("TenantId", this.state.tenantid);
    this.data.append("TenanrUrl", this.state.tenanturl);
    this.data.append("TenantPassword", this.state.tenantpassword);

    const options = {
      method: 'post',
      data: this.data,
      config: {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
    };

    adalApiFetch(options)
      .then(response => response.json())
      .then(responseJson => {
        if (!this.isCancelled) {
          this.setState({ data: responseJson });
        }
      })
      .catch(error => {
        console.error(error);
      });
  }


  upload(e){
      let data = new FormData();
      //Append files to form data
      let files = e.target.files;
      for (let i = 0; i < files.length; i++) {
        data.append('files', files[i], files[i].name);
      }      
  }

  render(){
    const { data } = this.state;
    const { rowStyle, colStyle, gutter } = basicStyle;

    return (
      <div>
        <LayoutWrapper>
        <PageHeader>{<IntlMessages id="pageTitles.TenantAdministration" />}</PageHeader>
        <Row style={rowStyle} gutter={gutter} justify="start">
          <Col md={12} sm={12} xs={24} style={colStyle}>
            <Box
              title={<IntlMessages id="pageTitles.TenantAdministration" />}
              subtitle={<IntlMessages id="pageTitles.TenantAdministration" />}
            >
              <ContentHolder>
              <form onSubmit={this.handleSubmit}>
                <label>
                  TenantId:
                  <input type="text" value={this.state.tenantid} onChange={this.handleChangeTenantId} />
                </label>
                <label>
                  TenantUrl:
                  <input type="text" value={this.state.tenanturl} onChange={this.handleChangeTenantUrl} />
                </label>
                <label>
                  TenantPassword:
                  <input type="text" value={this.state.tenantpassword} onChange={this.handleChangeTenantPassword} />
                </label>
                <label>
                  Certificate:
                  <input onChange = { e => this.upload(e) } type = "file" id = "files" ref = { file => this.fileUpload } />
                </label>             
              <input type="submit" value="Submit" />
              </form>
              </ContentHolder>
            </Box>
          </Col>
        </Row>
      </LayoutWrapper>
      </div>
    );
  }
}

Trying to submit a form in react, I get this error in the handlesubmit

TypeError: Cannot read property 'append' of undefined
_class.handleSubmit
src/containers/RegisterTenant/register.js:37
  34 | 
  35 | handleSubmit(event){
  36 |   event.preventDefault();
> 37 |   this.data.append("TenantId", this.state.tenantid);
  38 |   this.data.append("TenanrUrl", this.state.tenanturl);
  39 |   this.data.append("TenantPassword", this.state.tenantpassword);

my code is

import React, { Component } from 'react';

import { Row, Col } from 'antd';
import PageHeader from '../../ponents/utility/pageHeader';
import Box from '../../ponents/utility/box';
import LayoutWrapper from '../../ponents/utility/layoutWrapper.js';
import ContentHolder from '../../ponents/utility/contentHolder';
import basicStyle from '../../settings/basicStyle';
import IntlMessages from '../../ponents/utility/intlMessages';
import { adalApiFetch } from '../../adalConfig';

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {TenantId: '',TenanrUrl:'',TenantPassword:''};
    this.handleChangeTenantUrl = this.handleChangeTenantUrl.bind(this);
    this.handleChangeTenantPassword = this.handleChangeTenantPassword.bind(this);
    this.handleChangeTenantId= this.handleChangeTenantId.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  };


  handleChangeTenantUrl(event){
    this.setState({tenanturl: event.target.value});
  }

  handleChangeTenantPassword(event){
    this.setState({tenantpassword: event.target.value});
  }

  handleChangeTenantId(event){
    this.setState({tenantid: event.target.value});
  }

  handleSubmit(event){
    event.preventDefault();
    this.data.append("TenantId", this.state.tenantid);
    this.data.append("TenanrUrl", this.state.tenanturl);
    this.data.append("TenantPassword", this.state.tenantpassword);

    const options = {
      method: 'post',
      data: this.data,
      config: {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
    };

    adalApiFetch(options)
      .then(response => response.json())
      .then(responseJson => {
        if (!this.isCancelled) {
          this.setState({ data: responseJson });
        }
      })
      .catch(error => {
        console.error(error);
      });
  }


  upload(e){
      let data = new FormData();
      //Append files to form data
      let files = e.target.files;
      for (let i = 0; i < files.length; i++) {
        data.append('files', files[i], files[i].name);
      }      
  }

  render(){
    const { data } = this.state;
    const { rowStyle, colStyle, gutter } = basicStyle;

    return (
      <div>
        <LayoutWrapper>
        <PageHeader>{<IntlMessages id="pageTitles.TenantAdministration" />}</PageHeader>
        <Row style={rowStyle} gutter={gutter} justify="start">
          <Col md={12} sm={12} xs={24} style={colStyle}>
            <Box
              title={<IntlMessages id="pageTitles.TenantAdministration" />}
              subtitle={<IntlMessages id="pageTitles.TenantAdministration" />}
            >
              <ContentHolder>
              <form onSubmit={this.handleSubmit}>
                <label>
                  TenantId:
                  <input type="text" value={this.state.tenantid} onChange={this.handleChangeTenantId} />
                </label>
                <label>
                  TenantUrl:
                  <input type="text" value={this.state.tenanturl} onChange={this.handleChangeTenantUrl} />
                </label>
                <label>
                  TenantPassword:
                  <input type="text" value={this.state.tenantpassword} onChange={this.handleChangeTenantPassword} />
                </label>
                <label>
                  Certificate:
                  <input onChange = { e => this.upload(e) } type = "file" id = "files" ref = { file => this.fileUpload } />
                </label>             
              <input type="submit" value="Submit" />
              </form>
              </ContentHolder>
            </Box>
          </Col>
        </Row>
      </LayoutWrapper>
      </div>
    );
  }
}

• javascript
• reactjs

Share Improve this question Follow asked Jul 15, 2018 at 21:13 Luis ValenciaLuis Valencia 34.1k9999 gold badges311311 silver badges532532 bronze badges 1

• 2 You create no this.data anywhere in your code. Is that intentional? – Tholle Commented Jul 15, 2018 at 21:14

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You create no this.data anywhere in your code, so this.data will be undefined and trying to use append on that will give rise to your error.

You could create a new FormData in your handleSubmit instead.

Example

handleSubmit(event){
  event.preventDefault();

  const formData = new FormData();
  formData.append("TenantId", this.state.tenantid);
  formData.append("TenanrUrl", this.state.tenanturl);
  formData.append("TenantPassword", this.state.tenantpassword);

  const options = {
    method: 'post',
    data: formData,
    config: {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }
  };

  adalApiFetch(options)
    .then(response => response.json())
    .then(responseJson => {
      if (!this.isCancelled) {
        this.setState({ data: responseJson });
      }
    })
    .catch(error => {
      console.error(error);
    });
}