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

Answer 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>
    )
  }
}