Proceed to Radio Button Item Conditionally

Question

Say I have some radio button items. By default, the first item is checked. If I move to another item, I need to first check if a condition is true. If true, move to new radio button. If false, stay on current radio button.

Expected behavior: "orange" is checked by default. When the user decides to select another radio filter (ie "apple"), the handleRadioChange function is triggered. If the conditional is true, then "apple" is checked and "orange" is unchecked. If the conditional is false, then "orange" remains checked as it was before and "apple" remains unchecked as it was before.

I've added code to the snippet above that involves this new case.

import React from "react";

class SomePage extends React.Component {
  constructor() {
    super();
    this.state = {
      someVar: false,
      radioValue: "orange"
    };
  }

 fruitBasket = [
  {id: "orange", defaultChecked: true},
  {id: "apple"},
  {id: "banana"}
 ]

  someFunction = () => {
     //does some stuff
 }

  handleRadioChange = () => {
    setRadioValue(e.target.value);         // used within this function, but not shown here

    someFunction().then( someBool => {
     if(someBool !== undefined) {
         this.setState({someVar: true})    // move to new radio button
     } else {
         // ??                             // stay on old radio button!
     }
    })

  }

  render() {
    return (
      <div className="App">
            {fruitBasket.map( (fruit, id) => {
              return(
                <div key={fruit.id} onChange={this.handleRadioChange}>
                   <label>
                      <input 
                         type="radio" 
                         value={fruit.id}
                         defaultValue={fruit.defaultChecked}
                         name="fruit"
                      />
                      fruit.id
                   </label>
                </div>
              )
             })}
      </div>
    );
  }
}

Answer 1

You can have it as a controlled component, providing the checked for each option instead of using defaultValue

class SomePage extends Component {
  constructor() {
    super();
    this.state = {
      someVar: false,
      radioValue: "orange"
    };
    this.fruitBasket = [
      { id: "orange" },
      { id: "apple" },
      { id: "banana" }
    ]
  }

  handleRadioChange = (e) => {
    const { value } = e.target;

    if (condition) {
      this.setState({ radioValue: value })
    }
  }

  render() {
    return (
      <div className="App">
        {this.fruitBasket.map((fruit, id) => {
          return (
            <div key={fruit.id}>
              <label>
                <input
                  type="radio"
                  value={fruit.id}
                  checked={this.state.radioValue === fruit.id}
                  onChange={this.handleRadioChange}
                  name="fruit"
                />
                {fruit.id}
              </label>
            </div>
          )
        })}
      </div>
    );
  }
}