How can I Remove a className from other nested siblings after Radio input changed in React?

user_4942786 0
Viewed 59

I am trying to change the label color of a single radio input. The color is changing. However, when I click on other radio buttons the class persist. I only want one radio button to have the changed class. Here is my code. So far I have tired running a loop over it and used classList Remove to take the class off of the other label elements. Everything I have tried is in the if statement, I was trying to compare the label Element to the others.

Here is a codeSandbox so its easier to answer https://codesandbox.io/s/naughty-curie-b8fd2?fontsize=14

function checkInput(e) {
    let labelElement = e.target.parentNode;
    let bgElement = labelElement.parentNode.parentNode;
    bgElement.classList.add('checked');
    if( labelElement !== labelElement ){
        var oldChecked = document.getElementsByClassName('checked');
        for (let i = 0; i < oldChecked.length; i++){
            oldChecked[i].classList.remove('checked');
        }
    }
}

class ServiceLevel extends Component {
    render(){
        return (
            <div>
                <Segment>
                    <Menu attached="top" borderless={true}>
                        <Menu.Item>
                            <Header>Scale:</Header>
                            <Label className="filter_check" size="large">
                                <Form.Radio
                                label="Year"
                                control="input"
                                type="radio"
                                name="period"
                                onChange={checkInput}
                            />
                            </Label>
                            <Label className="filter_check" size="large">
                                <Form.Radio
                                label="Quarter"
                                control="input"
                                type="radio"
                                name="period"
                                value="quarter"
                                onChange={checkInput}
                            />
                            </Label>
                            <Label className="filter_check" size="large">
                                <Form.Radio
                                label="Month"
                                control="input"
                                type="radio"
                                name="period"
                                value="month"
                                onChange={checkInput}
                            />
                            </Label>
                            <Label className="filter_check" size="large">
                                <Form.Field
                                label="Date"
                                control="input"
                                type="radio"
                                name="period"
                                value="date"
                                onChange={checkInput}
                            />
                            </Label>
                            <Label className="filter_check" size="large">
                                <Form.Field
                                label="Interval"
                                control="input"
                                type="radio"
                                name="period"
                                value="interval"
                                onChange={checkInput}
                            />
                            </Label>
                        </Menu.Item>
                    </Menu>
                </Segment>
            </div>
        )
    }
}
export default ServiceLevel;

Css is even tho you probably only need the JSX

.filter_check input {
    display: none;
  }

  div.ui.large.label.filter_check.checked {
    background-color: #00b5ad;
  }
jsx reactjs javascript
1 Answers

It's a bad practice to manipulate classes through DOM API. So you need to add state to your component in which you will store selected value. Here the working code:

https://codesandbox.io/embed/stackoverflow-one-inputchecked-bgcolored-m1w07

const periodFilters = [
  {label: "Year",value: "year"},
  {label: "Quarter", value: "quarter"},
  {label: "Month", value: "month"},
  {label: "Date", value: "date"},
  {label: "Interval", value: "interval"}
];

class ServiceLevel extends Component {
  constructor() {
    super();
    this.state = {
      value: null
    };
  }

  checkInput(value) {
    this.setState({
      value
    });
  }

  render() {
    return (
      <div>
        <Segment>
          <Menu attached="top" borderless={true}>
            <Menu.Item>
              <Header>Scale:</Header>
              {periodFilters.map(item => {
                const isChecked = item.value === this.state.value;
                return (
                  <Label
                    className={`filter_check ${isChecked ? "checked" : ""}`}
                    size="large"
                  >
                    <Form.Radio
                      label={item.label}
                      control="input"
                      type="radio"
                      name="period"
                      value={item.value}
                      onChange={() => this.checkInput(item.value)}
                    />
                  </Label>
                );
              })}
            </Menu.Item>
          </Menu>
        </Segment>
      </div>
    );
  }
}
user_78450220
Related