not start isValidated method (react refs new style)

I cannot start isValidated() method in my step I found what stepMoveAllowed(skipValidationExecution = false) method in StepZIlla cannot properly check this because this.refs is empty

else if (Object.keys(this.refs).length == 0 || typeof this.refs.activeComponent.isValidated == 'undefined') {
				console.log(this.refs); // return EMPTY OBJECT
				// if its a form component, it should have implemeted a public isValidated class (also pure componenets wont even have refs - i.e. a empty object). If not then continue
				proceed = true;
			}

my libraries
"react": "^15.3.2",
    "react-addons-css-transition-group": "^15.5.2",
    "react-bootstrap": "^0.30.10",
    "react-dom": "^15.5.4",
    "react-dropzone": "^3.13.0",
    "react-hot-loader": "^3.0.0-beta.6",
    "react-overlays": "^0.6.12",
    "react-redux": "^5.0.4",
    "react-router": "3.0.5",
    "react-router-bootstrap": "^0.23.2",
    "react-router-dom": "^4.1.1",
    "react-router-redux": "^4.0.8",

[Stolr]

Hey guys ,

Having the same issue.

MainComponent :

        <div className='step-progress'>
          <StepZilla
            steps={this.getSteps()}
            nextTextOnFinalActionStep="Save"
            hocValidationAppliedTo={[5]}
            prevBtnOnLastStep={false}
          />
        </div>

My step 5

import React, {useState, Component, Fragment} from 'react';
import {FormattedMessage} from 'react-intl';
import messages from './messages';
import Card from 'components/Card/Loadable'
import {Grid, Button, TextField} from '@material-ui/core'
import SweetAlert from 'sweetalert-react';
import {toast} from 'react-toastify'
import 'sweetalert/dist/sweetalert.css';
import './style.scss'
import {Helmet} from "react-helmet";
import Promise from 'promise';


class ClusterCreateStepReview extends Component {
  constructor(props) {
    super(props);
    this.isValidated = this.isValidated.bind(this);
  }

  isValidated() {
    // Do some checking
    return true
  }
  
  render() {
    return (
      <Fragment>
        <div className="stepper-content">
          <Grid item xs={12}>
            <Card title="Summary">
              Cluster name
            </Card>
          </Grid>
        </div>
      </Fragment>
    )
  }
}

export default ClusterCreateStepReview;

And having this issue :

react-dom.development.js?61bb:289 Uncaught TypeError: Cannot read property 'refs' of undefined
    at StepZilla.stepMoveAllowed (main.js?90db:304)
    at StepZilla.abstractStepMoveAllowedToPromise (main.js?90db:325)
    at StepZilla.next (main.js?90db:248)
    at onClick (main.js?90db:407)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:199)
    at invokeGuardedCallback (react-dom.development.js?61bb:256)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?61bb:270)
    at executeDispatch (react-dom.development.js?61bb:561)
    at executeDispatchesInOrder (react-dom.development.js?61bb:583)

Issue seems to be here

          proceed = this.refs.activeComponent.refs.component.isValidated();

My knowledge in React is very limited , so might be something I’m doing wrong ?

[newbreedofgeek]

@jnordling @romanlex let me look into this further. I noticed that in @romanlex’s package.json, that your “react”: “^15.3.2” and “react-dom”: “^15.5.4” don’t match… I could be wrong but I believe it’s best practice that they match in version.

I do suspect this has something to do with your higher react-dom version, but let me investigate.