How to create bootstrap toggle buttons with React and Redux Form? - reactjs

Question

I am trying to create a toggable button group using React, Redux Form and Bootstrap (reactstrap).
What i have done is already correctly updating the redux form data.
The problem is with the button color attribute wich should be toggled between "success" and "secondary". Right now it does set the color on the first toggle, but does not update when i click another button afterwards.
This is my render component:
import React from 'react';
import classNames from 'classnames';
import { Label, FormGroup, ButtonGroup, Button } from 'reactstrap';
import FontAwesome from 'react-fontawesome';
export default class buttonOptions extends React.PureComponent {
static propTypes = {
input: React.PropTypes.object,
buttons: React.PropTypes.any,
label: React.PropTypes.string,
meta: React.PropTypes.shape({
touched: React.PropTypes.bool,
error: React.PropTypes.any,
})
};
constructor(props) {
super(props);
this.toggleOption = this.toggleOption.bind(this);
}
toggleOption(val) {
if (!this.props.input.value.length) this.props.input.value = [];
// option per buttongroud is always limited to 1
// remove previously selected options
for (let b of this.props.buttons) {
if (b.value !== val && this.props.input.value.indexOf(b.value) > -1) {
this.props.input.value.splice(this.props.input.value.indexOf(b.value), 1)
}
}
// push the new option and update state
this.props.input.value.push(val);
this.props.input.onChange(this.props.input.value)
}
render() {
const { input, buttons, label, meta: { touched, error }} = this.props;
const labelStyles = {width: '100%', marginBottom: '0'};
return (
<FormGroup>
<Label style={labelStyles}>{label}</Label>
<ButtonGroup>
{
buttons.map((b) => {
return (
<Button
key={b.title}
color={classNames({
success: input.value.indexOf(b.value) > -1,
secondary: input.value.indexOf(b.value) === -1,
})}
role="button"
onClick={() => { this.toggleOption(b.value) }}
>
{b.title}
</Button>
)
})
}
</ButtonGroup>
</FormGroup>
);
}
}
And this is how its implemented:
import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './AdWizard.css';
import cx from 'classnames';
import FontAwesome from 'react-fontawesome';
import { Field, reduxForm } from 'redux-form'
import { Row, Col, FormGroup, Label, Button } from 'reactstrap';
import buttonOptions from '../FormComponents/buttonOptions';
class Step2 extends React.Component {
constructor(props) {
super(props);
this.workingtimes = [
{
title: "Vollzeit",
value: "Vollzeit",
selected: true
},
{
title: "Teilzeit",
value: "Teilzeit",
selected: false
}
]
}
render() {
const { handleSubmit, previousPage } = this.props;
return (
<form onSubmit={handleSubmit}>
<Row className="justify-content-center">
<Col xs="12" sm="6">
<Field
label="Arbeitszeit"
name="arbeitszeit"
buttons={this.workingtimes}
component={buttonOptions}
/>
</Col>
</Row>
</form>
)
}
}
Step2 = reduxForm({
form: 'posting',
destroyOnUnmount: false,
forceUnregisterOnUnmount: true
})(Step2);
export default withStyles(s)(Step2);
Would be great if someone could help out!
Cheers
Stefan

Answer 1

The problem you have is that your toggleOption function is impure*.
This means it is mutating this.props.input.value, instead of creating a new array whose value is based on it - putting it simple, always create a new reference!
Since most React code out there is very sensitive to pure function calls,
you must convert that function to a pure one, so that redux-form actually sees you changed the array:
toggleOption (b) {
let newValue;
const currValue = this.props.input.value || [];
if (currValue.includes(b.value)) {
// value already exists in array, let's remove it from there
newValue = currValue.filter(val => val !== b.value);
} else {
// value doesn't exist in array, let's add it there
newValue = currValue.concat([b.value]);
}
this.props.input.onChange(newValue);
}
Array methods such as .filter() and .concat() are your frinds here: they return new array instances, instead of mutating the existing array.
Your code was using .push() and .splice(), methods that are bad, because they mutate the existing array.
You can see a small demo here.
* You can read more about this subject here.