Display material ui TextField depending on user selection

Question

I have a dropdown that display different options as following:

1. BUY x AND y AND z SAVE m
2. BUY n FOR m

What I want to do is, if I choose option 1 then I want to display 3 Textfields for x, y and z or if I choose option 2 I want to display two Textfields for n and m so the user can fill them with the values they want.

This is part of the code where I have a function to do the validation in the dropdown and the render method where now I display four Textfields the last one just display a label as an example.

  displayOfferTypeExample() {
    const value = {
      offer_example: ''
    };
    if (this.state.OfferTypeState === 'BUY x AND y AND z SAVE m') {
      value.offer_example = 'Buy ASDA Lemonade and ASDA Tea and save 5';
      console.log('OK');
    }
    if (this.state.OfferTypeState === 'BUY n SAVE m') {
      value.offer_example = 'Buy 2 for 1';
      console.log('OK');
    }

    return value;
  }

  render() {

    return (
      <div className={cr.container}>
        <div className ={cr.boton}>
          <Divider/>
          <br/>
        </div>
          <div>
            <DropDownMenu
              value={this.state.OfferTypeState}
              onChange={this.handleChangeOfferType}>
              <MenuItem value={''} primaryText={'Select offer type'} />
              {this.renderOfferTypeOptions()}
            </DropDownMenu>
          </div>
          <br/>
        <div>
          <div>
            <TextField
              onChange={(e) => {this.setState({buy_: e.target.value});}}
              value={this.state.buy_}
              errorText={this.state.buy_error}
              floatingLabelText="Buy"
            />
          </div>
          <div>
            <TextField
              onChange={(e) => {this.setState({and_: e.target.value});}}
              value={this.state.and_}
              errorText={this.state.and_error}
              floatingLabelText="And"
            />
          </div>
          <div>
            <TextField
              onChange={(e) => {this.setState({and_: e.target.value});}}
              value={this.state.and_}
              errorText={this.state.and_error}
              floatingLabelText="And"
            />
          </div>
          <div>
            <TextField
              onChange={(e) => {this.setState({save_: e.target.value});}}
              value={this.state.save_}
              errorText={this.state.save_error}
              floatingLabelText="Save"
            />
          </div>
          <div>
            <TextField
              disabled={true}
              hintText="Disabled Hint Text"
              value= {this.displayOfferTypeExample().offer_example}
              floatingLabelText="Example"
              multiLine={true}

            />
          </div>
        </div>
      </div>
    );
  }

I don't what is the bes approach to do this, if I need to create specific components per option so some help and guide will be great.

Answer 1

You can do like below. Check your state value and use && operator to render text fields.

    {this.state.OfferTypeState === 'BUY x AND y AND z SAVE m' && (
      <div>
        <div>
          <TextField
            onChange={(e) => {this.setState({buy_: e.target.value});}}
            value={this.state.buy_}
            errorText={this.state.buy_error}
            floatingLabelText="Buy"
          />
        </div>
        <div>
          <TextField
            onChange={(e) => {this.setState({and_: e.target.value});}}
            value={this.state.and_}
            errorText={this.state.and_error}
            floatingLabelText="And"
          />
        </div>
        <div>
          <TextField
            onChange={(e) => {this.setState({and_: e.target.value});}}
            value={this.state.and_}
            errorText={this.state.and_error}
            floatingLabelText="And"
          />
        </div>
      </div>)}
     {this.state.OfferTypeState === 'BUY n SAVE m' && (
      <div>
        <div>
          <TextField
            onChange={(e) => {this.setState({save_: e.target.value});}}
            value={this.state.save_}
            errorText={this.state.save_error}
            floatingLabelText="Save"
          />
        </div>
        <div>
          <TextField
            disabled={true}
            hintText="Disabled Hint Text"
            value= {this.displayOfferTypeExample().offer_example}
            floatingLabelText="Example"
            multiLine={true}

          />
        </div>
        </div>)}

You can also use ternary operator like below

{this.state.OfferTypeState === 'BUY x AND y AND z SAVE m' ? (
      <div>
        <div>
          <TextField
            onChange={(e) => {this.setState({buy_: e.target.value});}}
            value={this.state.buy_}
            errorText={this.state.buy_error}
            floatingLabelText="Buy"
          />
        </div>
        <div>
          <TextField
            onChange={(e) => {this.setState({and_: e.target.value});}}
            value={this.state.and_}
            errorText={this.state.and_error}
            floatingLabelText="And"
          />
        </div>
        <div>
          <TextField
            onChange={(e) => {this.setState({and_: e.target.value});}}
            value={this.state.and_}
            errorText={this.state.and_error}
            floatingLabelText="And"
          />
        </div>
      </div>)
     : (
      <div>
        <div>
          <TextField
            onChange={(e) => {this.setState({save_: e.target.value});}}
            value={this.state.save_}
            errorText={this.state.save_error}
            floatingLabelText="Save"
          />
        </div>
        <div>
          <TextField
            disabled={true}
            hintText="Disabled Hint Text"
            value= {this.displayOfferTypeExample().offer_example}
            floatingLabelText="Example"
            multiLine={true}

          />
        </div>
        </div>)}

You will mostly use above two operators in React especially ternary operator. Hope this answers your question.