React Redux form, how to change multiple button colors?

Question

When using Redux Form Wizard on second page, I have two buttons asking user gender, Male or Female.

Goal: When user clicks on either button, just that button turns orange from black text.

Here is a Sandbox modified from the ReduxForm website Wizard example at this link.

Issue:

when I click on either button, it doesn't change color individually (both buttons change color at same time when I just click on one button).

Here is the relevant files too in gist link and below. I'm using VS Code for my editor.

Any thoughts? Thank you!

WizardFormSecondPage.js

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import validate from '../wizard_supporting_files/validate';
import renderField from '../wizard_supporting_files/renderField';

import '../css/W2.scss';

class Test extends Component {
  constructor(){
         super();

         this.state = {
              buttonText: true
         }
    }

    changeTextColor(){
        this.setState({buttonText: !this.state.buttonText})
    }

    render(){
        let btn_class = this.state.buttonText ? "blackTextButton" : "orangeTextButton";
        const { input: { value, onChange } } = this.props
        console.log("this props shows", this.props);
        return (
             <div>
                 <button className={btn_class}
                         onClick={this.changeTextColor.bind(this)}>
                           Male
                  </button>
                  <button className={btn_class}
                  onClick={this.changeTextColor.bind(this)}>
                    Female
                </button>
             </div>
        )
    }
}

const renderError = ({ meta: { touched, error } }) =>
  touched && error ? <span>{error}</span> : false

const WizardFormSecondPage = props => {
  const { handleSubmit, previousPage } = props
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>What is your gender?</label>
      <div>

            <Field
              name="sex"
              component={Test}
              value="male"
            />

          <label>
            <Field
              name="sex"
              component="input"
              type="radio"
              value="female"
            />{' '}
            Working Radio Button
          </label>
          <Field name="sex" component={renderError} />
        </div>
      </div>
      <div>
        <button type="button" className="previous" onClick={previousPage}>
          Previous
        </button>
        <button type="submit" className="next">
          Next
        </button>
      </div>
    </form>
  )
}

export default reduxForm({
  form: 'wizard', //Form name is same
  destroyOnUnmount: false,
  forceUnregisterOnUnmount: true, // <------ unregister fields on unmount
  validate
})(WizardFormSecondPage)

W2.scss

  button{
    width: 80px;
    height: 40px;
    margin: 15px;
  }

  .blackTextButton{
    /* background-color: white; */
    color: black;
  }

  .orangeTextButton{
    /* background-color: white; */
    color: orange;
  }

Dhruv Shah · Accepted Answer · 2018-10-14 14:49:38Z

1

You can make the following changes to generate required behavior:

class Test extends Component {
  constructor() {
    super();
    this.state = {
      buttonText1: false,
      buttonText2: false
    }
  }

  changeTextColor(value) {
    if (value === 1)
      this.setState({ buttonText1: !this.state.buttonText1, buttonText2: false})
    else 
      this.setState({ buttonText1: false, buttonText2: !this.state.buttonText2 })
  }

  render() {
    const { input: { value, onChange } } = this.props
    console.log("this props shows blah", this.props);
    return (
      <div>
        <button type='button' className={this.state.buttonText1 ? 'orangeTextButton' : ''}
          onClick={() => this.changeTextColor(1)}>
          Male
                  </button>
        <button type='button' className={this.state.buttonText2 ? 'orangeTextButton' : ''}
          onClick={() => this.changeTextColor(2)}>
          Female
                </button>
      </div>
    )
  }
}

answered Oct 14, 2018 at 14:49

Dhruv Shah

1,6711 gold badge10 silver badges22 bronze badges

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

4 Comments

Dhruv Shah Over a year ago

Another way to to the same thing using the logic that you already have in the code can be found here: stackblitz.com/edit/react-aqbejn

Elia Ahadi Over a year ago

Ok thanks! That solves the first issue of multiple buttons changing color individually. The other issue of when I click on either button, it doesn't dispatch (send JSON data to store). Any thoughts on that part? The "Working Radio Button" works as intended, just not the two buttons above. <label> <Field name="sex" component="input" type="radio" value="female" />{' '} Working Radio Button </label>

Elia Ahadi Over a year ago

Actually, let me post that for new question and give you credit to solve that first issue. Thanks!

Dhruv Shah Over a year ago

@EliaAhadi the following link would be helpful to resolve that issue: redux-form.com/7.4.2/docs/faq/handlevson.md

Collectives™ on Stack Overflow

React Redux form, how to change multiple button colors?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related