reactjsradio-buttonredux-form

redux-form renderField type radio undefined value


I try to implement renderField for radio buttons, i can display it but when i click on radio field does not fill. When i check the console, value of input is equal to undefined, always !

This is my code :

render(){
    const {input, array, meta, label} = this.props;
    return(
      <div className="input-row">
        <div className="radio-box">
          {array.map((option,i) =>
            <div className="radio-field" key={i}>
              <input type='radio' name={option.name} onChange={() => {input.onChange('oui')}} value={option.value} checked={input.value === option.value} />
              {/* Try this before <input type='radio' {...input} name={option.name} value={option.value} checked={input.value == option.value}/> */}
              <label>{option.name}</label>
            </div>
          )}
        </div>
      </div>
    )
  }

I call this with :

<Field name="courtage" type="radio" label="Courtage ?" component={renderRadioField} array={selectOptions.courtage} {...courtage} />

SelectOptions.courtage is an array of object.


Solution

  • After few hours, I find a solution, I play with the state :

      setRadioState(a) {
        const obj = {};
        obj[a.target.name] = a.target.value;
        this.setState(obj);
      }
    
      render(){
        const {input, array, meta, label, name} = this.props;
        return(
          <div className="input-row">
            <div className="label-box">
              <label>{label}</label>
            </div>
            <div className="radio-box">
              {array.map((option,i) =>
                <div className="radio-field" key={i}>
                  <input type='radio' name={name} {...input} onChange={this.setRadioState.bind(this)} value={option.value} checked={this.state.name} />
                  <label>{option.name}</label>
                </div>
              )}
              {/* <div className="errors">{meta.touched && ((error && <span>{error}</span>))}</div> */}
            </div>
          </div>
        )