Passing several arguments into react component - methods

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.

Answer 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.

Answer 2

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