CODEWITHSUNDEEP
reactjs
Suleka_28
Suleka_28

Reputation: 2919

trigger function of onChange event not defined error

I am new to react. My goal is to let the user upload a file and send the file data to the server. I only want the user to upload csv file so to validate that I wrote an onChange fnction to test. But when I run this I get an error saying:

Failed to compile.

./src/pages/adddata/AddData.jsx
Line 13: 'validateFile' is not defined no-undef
Line 13: 'e' is not defined no-undef

Search for the keywords to learn more about each error.

Shown below is my code:

import {withStyles} from '@material-ui/core'
import PropTypes    from 'prop-types'
import * as React   from 'react'
import styles       from './AddData.styles'
import axios from 'axios'

class AddData extends React.Component {

  render() {

    const {classes} = this.props

    validateFile(e)
    {
      // let file= e.target.file;
      console.log("d")
    }

    return (
        <div className={classes.container}>
        <form onSubmit={this.handleSubmit}>
          <label>Name:</label> 
          <input type="text" name="dataset_name" className={classes.text} placeholder="Enter dataset name"></input><br/>
            <label>Type:</label>  
          <select name="data_format" className={classes.text}>
            <option value="null">Select Type of File</option>
            <option value="csv">CSV</option>
          </select><br/>
          <label>Select file: </label>          
          <input type="file" name="dataset_csv" className={classes.browse} onChange={this.validateFile.bind(this)}></input><br/>
            <input type="submit" value="Submit" className={classes.submit}></input>
        </form>
        </div>
    )
  }

}

AddData.propTypes = {
  classes: PropTypes.object.isRequired,
  theme  : PropTypes.object.isRequired,
}

export default withStyles(styles, {withTheme: true})(AddData)

What am I doing wrong?

Upvotes: 1

Views: 1665

Answers (2)

Vishal Sharma
Vishal Sharma

Reputation: 2610

Do not create handler functions inside render() as render executes several times in component life cycle (on every state change). Below will fix the problem

class AddData extends React.Component {

  validateFile(e)
  {
      // let file= e.target.file;
    console.log("d")
  }

  render() {

    const {classes} = this.props

    return (
        <div className={classes.container}>
        <form onSubmit={this.handleSubmit}>
          <label>Name:</label> 
          <input type="text" name="dataset_name" className={classes.text} placeholder="Enter dataset name"></input><br/>
            <label>Type:</label>  
          <select name="data_format" className={classes.text}>
            <option value="null">Select Type of File</option>
            <option value="csv">CSV</option>
          </select><br/>
          <label>Select file: </label>          
          <input type="file" name="dataset_csv" className={classes.browse} onChange={this.validateFile.bind(this)}></input><br/>
            <input type="submit" value="Submit" className={classes.submit}></input>
        </form>
        </div>
    )
  }

}

Upvotes: 2

The Reason
The Reason

Reputation: 7983

Move the validateFile function outside render function, beside it everything else looks good :)

Upvotes: 2

Related Questions