Passing several arguments into react component

Question

I'm working in React and I'm trying to pass several arguments (different sizes) to one method.

I have hard coded 8 sizes with hard coded labels and class names and that works, but it won’t work on the site since the size options will change depending on what other options are already filtered.

I need to make everything more general with more generic functions and loops.

REACT:

import React, { Component, PropTypes } from 'react';

class Sizes extends Component {

  constructor(props) {
    super(props);
    this.state = {
      XXS: false,
      XS: false,
      S: false,
      SM: false,
      M: false,
      L: false,
      XL: false,
      XXL: false,
    };

    this.toggleOnOffXXS = this.toggleOnOffXXS.bind(this);
    this.toggleOnOffXS = this.toggleOnOffXS.bind(this);
    this.toggleOnOffS = this.toggleOnOffS.bind(this);
    this.toggleOnOffSM = this.toggleOnOffSM.bind(this);
    this.toggleOnOffM = this.toggleOnOffM.bind(this);
    this.toggleOnOffL = this.toggleOnOffL.bind(this);
    this.toggleOnOffXL = this.toggleOnOffXL.bind(this);
    this.toggleOnOffXXL = this.toggleOnOffXXL.bind(this);
  }

  toggleOnOffXXS() {
    this.setState({
      XXS: !this.state.XXS
    });
  }

  toggleOnOffXS() {
    this.setState({
      XS: !this.state.XS
    });
  }

  toggleOnOffS() {
    this.setState({
      S: !this.state.S
    });
  }

  toggleOnOffSM() {
    this.setState({
      SM: !this.state.SM
    });
  }

  toggleOnOffM() {
    this.setState({
      M: !this.state.M
    });
  }

  toggleOnOffL() {
    this.setState({
      L: !this.state.L
    });
  }

  toggleOnOffXL() {
    this.setState({
      XL: !this.state.XL
    });
  }

    toggleOnOffXXL() {
    this.setState({
      XXL: !this.state.XXL
    });
  }

  render() {
    let XXS = this.state.XXS ? 'on' : '' ;
    XXS += ' filter-filterSize-XXS' ;

    let XS = this.state.XS ? 'on' : '' ;
    XS += ' filter-filterSize-XS' ;

    let S = this.state.S ? 'on' : '' ;
    S += ' filter-filterSize-S' ;

    let SM = this.state.SM ? 'on' : '' ;
    SM += ' filter-filterSize-SM' ;

    let M = this.state.M ? 'on' : '' ;
    M += ' filter-filterSize-M' ;

    let L = this.state.L ? 'on' : '' ;
    L += ' filter-filterSize-L' ;

    let XL = this.state.XL ? 'on' : '' ;
    XL += ' filter-filterSize-XL' ;

    let XXL = this.state.XXL ? 'on' : '' ;
    XXL += ' filter-filterSize-XXL' ;

    return (
        <div
          className='filter-filterSize-buttons'
        >
            <a
              className={ XXS }
              href='#'
              onClick={ this.toggleOnOffXXS }
            >
              { 'xxs' }
            </a>
            <a
              className={ XS }
              href='#'
              onClick={ this.toggleOnOffXS }
            >
              { 'xs' }
            </a>
            <a
              className={ S }
              href='#'
              onClick={ this.toggleOnOffS }
            >
              { 's' }
            </a>
            <a
              className={ SM }
              href='#'
              onClick={ this.toggleOnOffSM }
            >
              { 's-m' }
            </a>
            <a
              className={ M }
              href='#'
              onClick={ this.toggleOnOffM }
            >
              { 'm' }
            </a>
            <a
              className={ L }
              href='#'
              onClick={ this.toggleOnOffL }
            >
              { 'l' }
            </a>
            <a
              className={ XL }
              href='#'
              onClick={ this.toggleOnOffXL }
            >
              { 'xl' }
            </a>
            <a
              className={ XXL }
              onClick={ this.toggleOnOffXXL }
            >
              { 'xxl' }
            </a>
        </div>
    );
  }
}

export default Sizes;

I was suggested that it should be written in this manner:

toggleState(key) {
  let state = {};

  state[key] = !this.state[key];

  this.setState(XXS);
}

But when I try, everything goes into loop and pretty much craches every time...

Appreciate any help on this.

Lars Graubner · Accepted Answer · 2016-03-02 14:06:05Z

1

I'd suggest using just one handler function and generate your links with bindings.

import React, { Component, PropTypes } from 'react';

class Sizes extends Component {

  constructor(props) {
    super(props);
    this.state = {
      XXS: false,
      XS: false,
      S: false,
      SM: false,
      M: false,
      L: false,
      XL: false,
      XXL: false,
    };

    this.sizes = ['XXS', 'XS', 'S', 'SM', 'M', 'L', 'XL', 'XXL'];
  }

  toggleOnOff(size) {
    this.setState({
      [size]: !this.state.size
    });
  }

  render() {
    let XXS = this.state.XXS ? 'on' : '' ;
    XXS += ' filter-filterSize-XXS' ;

    let XS = this.state.XS ? 'on' : '' ;
    XS += ' filter-filterSize-XS' ;

    let S = this.state.S ? 'on' : '' ;
    S += ' filter-filterSize-S' ;

    let SM = this.state.SM ? 'on' : '' ;
    SM += ' filter-filterSize-SM' ;

    let M = this.state.M ? 'on' : '' ;
    M += ' filter-filterSize-M' ;

    let L = this.state.L ? 'on' : '' ;
    L += ' filter-filterSize-L' ;

    let XL = this.state.XL ? 'on' : '' ;
    XL += ' filter-filterSize-XL' ;

    let XXL = this.state.XXL ? 'on' : '' ;
    XXL += ' filter-filterSize-XXL' ;

    return (
        <div
          className='filter-filterSize-buttons'
        >
          {
            this.sizes.map((size) => {
              const toggleOnOff = this.toggleOnOff.bind(this, size);
              return (
                <a href="#" className={[size]} onClick={toggleOnOff}>{size}</a>
              )
            })
          }
        </div>
    );
  }
}

export default Sizes;

I did not test this, but this should fix your project.

answered Mar 2, 2016 at 14:06

Lars Graubner

8374 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DearBee Over a year ago

Thank you for the handler. I'm affraid that the classes aren't going through though. When pressing button, it should add 'on.' to each class. I'm still trying things based on your code so will let you know. Thanks!

DearBee Over a year ago

Thanks once again, I was able to finish it with your input :)

Brandon · Accepted Answer · 2016-03-02 14:05:39Z

1

I'm sort of trying to divine through the missing code, but I believe that last line should be: this.setState(state);

toggleState(key) {
  let state = {};

  state[key] = !this.state[key];

  this.setState(state);
}

// or, more simply:
toggleState(key) {
    this.setState({[key]: !this.state[key]});
}

answered Mar 2, 2016 at 14:05

Brandon

39.3k8 gold badges86 silver badges89 bronze badges

Collectives™ on Stack Overflow

Passing several arguments into react component

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related