Validation

[mmaask]

Any suggestions how would validation implementation look like if my the content of the step is another component. How would I be able to validate if I can move forward to next step in this case, give the all components validate differently?

[jackjocross]

If your validation logic is spread across multiple components or multiple steps, I think your best bet would be to lift that state up to the closest common ancestor. That might look like:

import React from 'react';
import { Wizard, Steps, Step } from 'react-albus';
import Name from './Name';
import Email from './Email';
import Confirmation from './Confirmation';

class Signup extends React.Component {
  state = {
    name: null,
    email: null,
  }

  setName = name => this.setState({ name });
  setEmail = email => this.setState({ email });

  render() {
    const { name, email } = this.state;
    return (
      <Wizard>
        <Steps>
          <Step id="name">
            <Name name={name} setName={this.setName} />
          </Step>
          <Step id="email">
            <Email email={email} setEmail={this.setEmail} />
          </Step>
          <Step id="confirmation">
            <Confirmation name={name} email={email} />
          </Step>
        </Steps>
      </Wizard>
    );
  }
}

Your validation logic could then live in the Name and Email components and be run before calling the set functions, or the logic could live in the Confirmation component and be called once you reach the final step.

If passing the state around to each step is adding too much complexity, you could also consider keeping that state in a global store like Redux.

[Dhirajbhujbal]

Can Any one please update the Demo Please

I want to do validation on the next button