TypeError: Cannot read property 'IsValidated' of undefined

Hello I see that other people were having this issue but I didn’t see a clear answer.

the steps work great, its the validation I’m having an issue with. Please advise.

Here’s the complete error

main.js?e1d2:318 Uncaught TypeError: Cannot read property 'isValidated' of undefined
    at StepZilla.stepMoveAllowed (main.js?e1d2:318)
    at StepZilla.abstractStepMoveAllowedToPromise (main.js?e1d2:341)
    at StepZilla.next (main.js?e1d2:255)
    at onClick (main.js?e1d2:444)
    at HTMLUnknownElement.callCallback (react-dom.development.js?cada:540)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?cada:579)
    at Object.invokeGuardedCallback (react-dom.development.js?cada:436)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?cada:450)
    at executeDispatch (react-dom.development.js?cada:834)
    at executeDispatchesInOrder (react-dom.development.js?cada:853)

I have a component (Step1) and here is the code

'use strict';

import React, { PropTypes, Component } from 'react';
import { Row, Col, Button,  ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem, Card, CardHeader, CardFooter, CardBody, Form, FormGroup, FormText, Label, Input,
InputGroup, InputGroupAddon, InputGroupButton} from 'reactstrap';

 
class Step1 extends Component {
  constructor(props) {
    super(props)

    // sets state of package name
    this.state = {
      email: props.getStore().packagename,
      gender: props.getStore().gender
    };

    // This flag enables onBlur validation as user fills out forms.
    this._validateOnDemand = true;

    // Bind 
    this.validationCheck = this.validationCheck.bind(this);
    this.isValidated = this.isValidated.bind(this);
    }

    componentDidMount() {
    //  console.log("componentDidMount")  
    }
  
    componentWillMount() {
    //  console.log("componentWillMounts")
    }

    isValidated() {
      const userInput = this._grabUserInput(); // grab user entered vals
      const validateNewInput = this._validateData(userInput); // run the new input against the validator
      let isDataValid = false;
  
      // if full validation passes then save to store and pass as valid
      if (Object.keys(validateNewInput).every((k) => { return validateNewInput[k] === true })) {
          if (this.props.getStore().packagename != userInput.packagename) { // only update store of something changed
            this.props.updateStore({
              ...userInput,
              savedToCloud: false // use this to notify step4 that some changes took place and prompt the user to save again
            });  // Update store here (this is just an example, in reality you will do it via redux or flux)
          }

         
  
          isDataValid = true;
      }
      else {
          // if anything fails then update the UI validation state but NOT the UI Data State
          this.setState(Object.assign(userInput, validateNewInput, this._validationErrors(validateNewInput)));
      }
  
      return isDataValid;
    }

    validationCheck() {
      if (!this._validateOnDemand)
        return;
  
      const userInput = this._grabUserInput(); // grab user entered vals
      const validateNewInput = this._validateData(userInput); // run the new input against the validator
  
      this.setState(Object.assign(userInput, validateNewInput, this._validationErrors(validateNewInput)));
    }

    _validateData(data) {
      return  {
        packagenameVal: (data.packagename != 0) // required: anything besides N/A
        }
    }



    _validationErrors(val) {
      const errMsgs = {
        packagenameValMsg: val.packagenameVal ? '' : 'A Package Name required'
        
      }
      return errMsgs;
    }

    _grabUserInput() {
      return {
        packagename: this.refs.packagename.value
        
      };
    }



render() {

  // Explicit class assigning based on validation 

   // explicit class assigning based on validation
   let notValidClasses = {};
   
       if (typeof this.state.packagenameVal == 'undefined' || this.state.packagenameVal) {
         notValidClasses.packagenameCls = 'no-error col-md-8';
       }
       else {
          notValidClasses.packagenameCls = 'has-error col-md-8';
          notValidClasses.packagenameValGrpCls = 'val-err-tooltip';
       }
   
      
  

return (
    <div className="step step1">
      <div className="row">
      
        <form id="Form" className="form-horizontal">
            <div id="stepscontainer" className="form-group">
            <label className="col-md-12 control-label">
              <h2>Please provide a unique name for the package</h2>
            </label>
            <div className="row content">
              <div className="col-md-12">
                  Give a short name that can identify the package with, using underscore and no spaces.
                  <br /><br />
                     <FormGroup row>
                     <Col xs="12" md="9">
                     <div className={notValidClasses.packagnameCls}>
                     <Input ref="packagename" 
                     autoComplete = "off"
                     placeholder="Enter package name"
                     type="packagename" 
                     className="form-control"
                     required
                     defaultValue={this.state.packagename}
                     id="packagename" 
                     onBlur={this.validationCheck}
                     size="145" />
                    <div className={notValidClasses.packagenameValGrpCls}>{this.state.packagenameValMsg}</div>
                    </div>
                    </Col>
                  </FormGroup>
              
              </div>
              <div className="col-md-12 eg-jump-lnk">
               
              </div>
            </div>
          </div>
          
        </form>
      </div>
      </div>
    )
  }
}

export default Step1;

Here’s my code for my dashboard (Kinda like your example.js)

import React, { Component } from 'react';
import {connect} from 'react-redux';
import {Bar, Line} from 'react-chartjs-2';
import { Badge, Row, Col, Progress, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Card, CardHeader, CardBody, CardFooter, CardTitle, Container, Button, ButtonToolbar,
  ButtonGroup, ButtonDropdown, Label, Input, Table, Form, FormGroup, FormText, InputGroup, InputGroupAddon,  InputGroupButton, Modal, ModalHeader, ModalBody, ModalFooter
} from 'reactstrap';
import SelectPackagePanel from '../Components/SelectPackagePanel/SelectPackagepanel.jsx';
import StepZilla from 'react-stepZilla';
import Step1 from '../Components/Step1/step1.jsx';
import Step2 from '../Components/Step2/step2.jsx';
import Step3 from '../Components/Step3/step3.jsx';
import Step4 from '../Components/Step4/step4.jsx';
import Step5 from '../Components/Step5/step5.jsx';



class Dashboard extends Component {
  constructor(props) {
    super(props);

    

   


    this.state = {};

    this.packageStore = {
      packagename: '',
      savedToPersist: false
    };
   
    this.togglePrimary = this.togglePrimary.bind(this);

  }

  togglePrimary() {
    this.setState({
      primary: !this.state.primary
    });

  }

  componentDidMount() {}
  
  componentWillUnmount() {}

  getStore() {
    return this.packageStore;
  }

  updateStore(update) {
    this.packageStore = {
      ...this.packageStore,
      ...update,
    }
  }
 

  render() {

    
    
    const steps =
    [
      {name: 'Package Name', component: <Step1 getStore={() => (this.getStore())} updateStore={(u) => {this.updateStore(u)}} />},
      {name: 'Package Type', component: <Step2 getStore={() => (this.getStore())} updateStore={(u) => {this.updateStore(u)}} />},
      {name: 'Step3', component: <Step3 getStore={() => (this.getStore())} updateStore={(u) => {this.updateStore(u)}} />},
      {name: 'Step4', component: <Step4 getStore={() => (this.getStore())} updateStore={(u) => {this.updateStore(u)}} />},
      {name: 'Step5', component: <Step5 getStore={() => (this.getStore())} updateStore={(u) => {this.updateStore(u)}} />},
    ]

    return (
      <div className="animated fadeIn">
       
       
    
       {/* <SelectPackagePanel /> */}
       <div className="homebg">
       <Container>
         
        <Row>
        <Col xs="12" sm="6" md="6" id="homecol1">
            <Card id="homeshadow" className="border-info">
              <CardHeader>
                Welcome to CDS
              </CardHeader>
              <CardBody>
                <div className="homecontentcontainer">
               <strong> <div className="hometitle">What would you like to do? </div> </strong>
               
                <Col md="12">
                      <FormGroup check>
                        <div className="radio">
                          <Label check htmlFor="radio1">
                            <Input type="radio" id="radio1" name="radios" value="option1"/> Create a new content Package
                          </Label>
                        </div>
                        <div className="radio">
                          <Label check htmlFor="radio2">
                            <Input type="radio" id="radio2" name="radios" value="option2"/> Work with an existing package
                          </Label>
                        </div>
                        <div className="radio">
                          <Label check htmlFor="radio3">
                            <Input type="radio" id="radio3" name="radios" value="option3"/> Take me to Test Workflow
                          </Label>
                        </div>
                   <div className="homesubmit">
                   <Button color="primary" onClick={this.togglePrimary}>Submit</Button>
                   <Modal isOpen={this.state.primary} toggle={this.togglePrimary}
                   className={'modal-primary ' + this.props.className}>
                  <ModalHeader toggle={this.togglePrimary}>Create a package</ModalHeader>
                  <ModalBody>
                  <div className='example'>
                  <div className='step-progress'>
                  <StepZilla
                  steps={steps}
                  preventEnterSubmission={true}
                  nextTextOnFinalActionStep={"Next"}
                  hocValidationAppliedTo={[0]}
                  startAtStep={window.sessionStorage.getItem('step') ? parseFloat(window.sessionStorage.getItem('step')) : 0}
                  onStepChange={(step) => window.sessionStorage.setItem('step', step)}
                   />
                  </div>
                  </div>
                  </ModalBody>
                  
                </Modal>
                        </div>
                       
                      </FormGroup>
                    </Col>
                    </div>
               
                
              </CardBody>
            </Card>
          </Col>
        </Row>
        </Container>
      </div>
      </div>
    )
  }
}

export default Dashboard;

[tabrindle]

I believe I have traced the probable cause of these errors.

Turns out that there is code that checks a react component’s prototype for an isValidated method.

The problem is that arrow functions () => {} do not have a prototype

if you had a component like this, you would throw Cannot read property 'isValidated' of undefined because prototype doesn’t exist here.

const LoadingView = ({ top, title }) => (
  <Loading top={top}>
    <h4>{title}</h4>
  </Loading>
);

Long story short, this was hard to track down because of Babel - Older presets like es2015 (like used in this library, including its tests) will transpile this component like this:

"use strict";

var LoadingView = function LoadingView(_ref) {
  var top = _ref.top,
      title = _ref.title;
  return React.createElement(
    Loading,
    { top: top },
    React.createElement(
      "h4",
      null,
      title
    )
  );
};

Notice the change to a regular function? This function has a prototype, and will not throw.

Now, say you upgrade an existing app using react-stepzilla to Babel 7, and use preset-env for modern browsers. This is now your transpiled component. And boom, no prototype so this method throws.

"use strict";

const LoadingView = (_ref) => {
  let top = _ref.top,
      title = _ref.title;
  return React.createElement(
    Loading,
    { top: top },
    React.createElement(
      "h4",
      null,
      title
    )
  );
};

The easiest workaround here is to use a standard function() {} instead of () => {}

Realistically, this isn’t much of a permanent solution. A safer property access on the react components, not assuming a prototype property exists should be enough to fix this bug.

https://github.com/newbreedofgeek/react-stepzilla/blob/master/src/main.js#L33

I would also recommend a different babel preset for your tests, possibly leaving arrow functions intact. They are pretty universally well supported now

• https://caniuse.com/#feat=arrow-functions
• https://node.green/#ES2015-functions-arrow-functions

[tarsusi]

@dk4210, today, I had the same problem and after some debugging on the code, I realized that the package(react-stepzilla) cannot find the isValidated property since it cannot find the step component’s prototype. This was because my component, that is used in step, was a functional component

const FeedbackSelfThanks = (props) => { return 'Something'; }

I changed the component to class one:

class FeedbackSelfThanks extends React.Component { render() { return 'Something'; } }

Now, the error has gone. Maybe this help you