score:1

Accepted answer

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.

score: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]});
}

Related Query

More Query from same tag