How to call Name Function(ES 6)?

Question

I have this code

   import React from 'react';

import 'materialize-css/sass/materialize.scss';
import 'materialize-css/js/materialize.js';
import 'font-awesome/scss/font-awesome.scss';
import '../styles/main.scss';

export default class AddStorageModal extends React.Component {
    constructor() {
        super();
        this.state = { storageName: "", sharingKey: "" }
    }
    handleChange(e) {
        this.setState({ [e.target.name]: e.target.value });
    }
    validate() {
        if (this.state.storageName === "" && this.state.sharingKey == "") {
            console.log("validation error");
            return false;
        } 
        this.props.createNewStorage(this.state);
    }
    resetForm() {
        this.state = { storageName: "", sharingKey: "" }
        $(function () {
            Materialize.updateTextFields();
        });
    }
    render() {
        if (this.props.storages.openAddStorageModal) {
            $('#add-new-storage-modal').openModal({ dismissible: false });
        }
        else {
            $('#add-new-storage-modal').closeModal();
            ****resetForm();*****
        }
        return (
            <div id="add-new-storage-modal" className="modal" >
                <div className="modal-content">
                    <h6>Enter your new Storage (Freezer, Pantry, etc.) </h6>
                    <div className="row">
                        <form>
                            <div className="input-field col s12 m12 l12 ">
                                <input id="storage_name" type="text" value={this.state.storageName} name="storageName" onChange={this.handleChange.bind(this) } />
                                <label htmlFor="storage_name">Storage Name</label>
                            </div>
                            <br />
                            <h4 className="center">OR</h4>
                            <h6>Enter in the sharing key you were given.</h6>
                            <div className="input-field col s12 m12 l12 ">
                                <input id="sharing_key" type="text"  value={this.state.sharingKey} name="sharingKey" onChange={this.handleChange.bind(this) }  />
                                <label htmlFor="sharing_key">Sharking Key</label>
                            </div>
                        </form>
                    </div>
                </div>
                <div className="modal-footer">
                    <a href="#!" className="waves-effect waves-green btn-flat left" onClick={() => this.validate() }>Add</a>
                    <a href="#!" className="waves-effect waves-green btn-flat" onClick={() => this.props.loadAddStorageModal(false) }>Cancel</a>
                </div>
            </div>
        )
    }
}

I get this error

AddStorageModal.js:35Uncaught ReferenceError: resetForm is not defined

How do I call resetForm()? I am calling right now in the "else"(just look for the stars)

Btw, `this.state = { storageName: "", sharingKey: "" }` --- you are **NOT** supposed to reassign `this.state` manually, but using `this.setState()` only. — zerkms, Aug 10 '16 at 01:42
Or you tell us there are you calling resetForm or it's impossible for us to help you. (something tells me it's from jQuery.. I hope I'm wrong) — Andre Pena, Aug 10 '16 at 03:08
Where are you calling `resetState`? I can't actually see where it's being called! — James111, Aug 10 '16 at 03:37
you are not binding the event listeners. that could have caused the error. anyway, where are calling resetForm? — Deadfish, Aug 10 '16 at 14:54
@andrerpena Oops sorry. I guess I pasted the wrong code. I have updated it. — chobo2, Aug 10 '16 at 16:31
`this.resetForm()`. Perhaps docs can be useful for something finally. You can read up on class syntax [here](https://stackoverflow.com/documentation/javascript/197/classes) I guess. — ivarni, Aug 10 '16 at 16:39
@zerkms - when I try changing my restForm & constructor to setState() I get 600+ saying it does not like it. warning.js:44Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). So I removed that from constuctor and went back to the way I was doing and just left restForm() to setState but still does not like that. — chobo2, Aug 10 '16 at 17:26

score 1 · Accepted Answer · answered Aug 10 '16 at 17:59

1

You forgot the this.

It should be:

if (this.props.storages.openAddStorageModal) {
    $('#add-new-storage-modal').openModal({ dismissible: false });
}
else {
    $('#add-new-storage-modal').closeModal();
    this.resetForm();
}

answered Aug 10 '16 at 17:59

Andre Pena

56,650
48
196
243

great that worked. Now just trying to figure out the "setState" as getting a problem. – chobo2 Aug 10 '16 at 20:03
ah, I got to bind it. What is better to write () => this.resetForm(); or this.resetForm.bind(this); – chobo2 Aug 10 '16 at 20:06
I am not sure if I have to create a new ticket but now this.resetForm.bind(this) does not work anymore. I watch it through debugger, it does not call the method anymore but no error either. – chobo2 Aug 10 '16 at 23:20

How to call Name Function(ES 6)?

1 Answers1