How to show and hide components in React to implement a multiple steps form?

Question

I am new to React. I want to hide and show some parts of my code at the same time. From my below codes, on load only the "step_one" class should be visible, and the "step_two" class should be hidden. Once I click on SUBMIT I want to hide the "step_one" part and the "step_two" part should be visible. Please suggest me to achieve this. Thank you.

App.tsx:

interface IState {
  cName: string;
  cEmail: string;
}
class App extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      cName: '',
      cEmail: ''
    }
    this.nameChange = this.nameChange.bind(this);
    this.emailChange = this.emailChange.bind(this);
    this.computeBmi = this.computeBmi.bind(this);
  }
  nameChange(nameValue) {
    this.setState({ cName : nameValue });
  }
  emailChange(emailValue) {
    this.setState({ cEmail : emailValue });
  }
  computeBmi() {
    // some code here
  }

render() {
    return (
      <div>
        <div class="step_one">
          <TextInput label="Please confirm your full name?" placeholder="Your full name" onChange={this.nameChange} />
          <TextInput label="Please confirm your email?" placeholder="Your Email ID" onChange={this.emailChange} />
          <MyButton label="SUBMIT" onClick={ this.computeBmi } />              
        </div>
        <div class="step_two">
          // some code
        </div>
      </div>
   )
 }
}


export default App;

TextInput.tsx:

interface TIProps {
    label?: any;
    placeholder?: any;
    onChange(inputValue: string): any;
}
interface TIState {
    value: number;
    error: string;
}

class TextInput extends React.Component<TIProps, TIState> {

    constructor(props: TIProps) {
        super(props);
        this.state = { 
            value : 0,
            error : ''
        };
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        let inputValue = event.target.value;
        this.setState({ value : inputValue });
        this.props.onChange(inputValue);
    }

    render() {
        return(
            <div>
                <FormControl>
                    <TextField label={ this.props.label } type="text" placeholder={this.props.placeholder} onChange={this.handleChange} />
                </FormControl>
            </div>
        )
    }
}

export default TextInput;

MyButton.tsx:

interface BIProps {
    label?: any;
    variant?: any;
    size?: any;
    color?: any;
    onClick: React.MouseEventHandler<HTMLButtonElement>;
}
interface BIState {
}


class MyButton extends React.Component<BIProps, BIState> {
    render() {
        return(
            <button className="myButton" onClick={this.props.onClick}>
                {this.props.label}
            </button>
        )
    }
}

export default MyButton;

Answer 1

this might solve your problem

interface IState {
    cName: string;
    cEmail: string;
    step: number;
}
class App extends React.Component<IProps, IState> {
    constructor(props: IProps) {
        super(props);
        this.state = {
            cName: '',
            cEmail: '',
            step: 1,
        }
        this.nameChange = this.nameChange.bind(this);
        this.emailChange = this.emailChange.bind(this);
        this.computeBmi = this.computeBmi.bind(this);
    }
    nameChange(nameValue) {
        this.setState({ cName : nameValue });
    }
    emailChange(emailValue) {
        this.setState({ cEmail : emailValue });
    }
    computeBmi() {
        this.setState({ step: 2 });
        // some code here
    }

    render() {
        return (
            <div>
                {
                    this.state.step === 1 && <div class="step_one">
                        <TextInput label="Please confirm your full name?" placeholder="Your full name" onChange={this.nameChange} />
                        <TextInput label="Please confirm your email?" placeholder="Your Email ID" onChange={this.emailChange} />
                        <MyButton label="SUBMIT" onClick={ this.computeBmi } />
                    </div>
                }
                {
                    this.state.step === 2 && <div class="step_two">
                        // some code
                    </div>
                }
            </div>
        )
    }
}


export default App;

Answer 2

You could use a step property in your props, and use conditional rendering, like below:

interface IState {
  cName: string;
  cEmail: string;
  step: 1 | 2;
}
class App extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      cName: "",
      cEmail: "",
      step: 1,
    };
    this.nameChange = this.nameChange.bind(this);
    this.emailChange = this.emailChange.bind(this);
    this.computeBmi = this.computeBmi.bind(this);
  }
  nameChange(nameValue) {
    this.setState({ cName: nameValue });
  }
  emailChange(emailValue) {
    this.setState({ cEmail: emailValue });
  }
  computeBmi(e) {
    e.preventDefault();
    // some code here
    this.setState({ ...this.state, step: 2 });
  }

  render() {
    return (
      <div>
        {this.step === 1 && (
          <div class="step_one">
            <TextInput
              label="Please confirm your full name?"
              placeholder="Your full name"
              onChange={this.nameChange}
            />
            <TextInput
              label="Please confirm your email?"
              placeholder="Your Email ID"
              onChange={this.emailChange}
            />
            <MyButton label="SUBMIT" onClick={this.computeBmi} />
          </div>
        )}

        {this.step == 2 && <div class="step_two">// some code</div>}
      </div>
    );
  }
}

export default App;

Answer 3

You also can add an additional modifier class using the syntax of template literals . For example:

className={`todo ${todo.isCompleted ? 'todo--completed' : ''}`}