main.css

/* The container */
.radioContainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.radioContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #FFFFFF;
  border-radius: 50%;
  border: 2px solid #6E6E6E;
}

/* On mouse-over, add a red border */
.radioContainer:hover input ~ .checkmark {
  border: 2px solid #B52026;
}

/* When the radio button is checked, add a red background */
.radioContainer input:checked ~ .checkmark {
  background-color: #B52026;
  border: 2px solid #B52026;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radioContainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radioContainer .checkmark:after {
 	top: 4px;
	left: 4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

radiobutton.js

export class RadioButton extends Component {

  constructor(props){
    super(props);
    this.state = {
      checked: this.props.checked,
    }
  }

  onChange(i){
    this.setState({
      checked: i
    });
  }


  render(){

    return(
      this.props.radioOptions.map((option,i)=>{
        return <label key={i} className="radioContainer">
          <input
            type="radio"
            checked={this.state.checked === i ? true : false}
            key={i}
            onChange={this.onChange.bind(this,i)}
          />
          <span className="checkmark"></span>
            {option}
          </label>
      })
    );
  }
}