Breaking the whole render function

[subhojit777]

I am trying to render group of radio buttons using this component. This is what I wrote inside render():

      <div className="form-wrapper">
        {alert}
        <form onSubmit={this.handlePostAnswer}>
          <h3 className="question">{this.props.question.question}</h3>
          <div className="options-wrapper well" onClick={this.handleOptionChange}>
            <RadioGroup name="options" onChange={this.handleOptionChange}>
              {Radio => (
                <div className="radio">
                  <label>
                    <Radio value="radio1" /> Radio 1
                  </label>
                </div>
                <div className="radio">
                  <label>
                    <Radio value="radio2" /> Radio 2
                  </label>
                </div>
              )}
            </RadioGroup>
          </div>
          <button type="submit" className="btn btn-primary">Submit</button>
        </form>
      </div>

This breaks the whole page, I mean it does not renders anything. The state and props are all fine - I checked. There is even no errors/warnings in logs.

I have even tried rendering a simple radio button using this <Radio name="something" /> Some radio, even this breaks the whole render operation.

Not sure what I am doing wrong, any help would be appreciated. Thanks.

[dandean]

The content of this must be wrapped in a single element:

{Radio => (
  <div>
     ...
  </div>
)}

You have two elements in the top level of that.

[subhojit777]

Still not working

      <div className="form-wrapper">
        {alert}
        <form onSubmit={this.handlePostAnswer}>
          <h3 className="question">{this.props.question.question}</h3>
          {/* @TODO use https://github.com/chenglou/react-radio-group */}
          <div className="options-wrapper well" onClick={this.handleOptionChange}>
            <RadioGroup onChange={this.handleOptionChange}>
              {Radio => (
                <div>
                  <Radio value="radio1" /> Radio 1
                  <Radio value="radio2" /> Radio 2
                </div>
              )}
            </RadioGroup>
          </div>
          <button type="submit" className="btn btn-primary">Submit</button>
        </form>
      </div>

[subhojit777]

BTW I am writing the code in ES6 format. I don't think that might be the issue.

[bvn13]

I have the same problem.
Using ES6.

[danielberndt]

The API was changed quite a lot with v3.0.0. So you now can write your code like this:

import {RadioGroup, Radio} from "react-radio-group";

...

<RadioGroup name="options" onChange={this.handleOptionChange}>
  <div className="radio">
    <label>
      <Radio value="radio1" /> Radio 1
    </label>
  </div>
  <div className="radio">
    <label>
      <Radio value="radio2" /> Radio 2
    </label>
  </div>
</RadioGroup>

Please let us know if there are any issues left with the new syntax. Otherwise I'm going to close this issue in the next couple of days :)

[kellyjanderson]

Using that code I am getting errors. Using ES6 style coding in current React.

"react": "15.0.2",

import React from "react";
import {RadioGroup, Radio} from "react-radio-group";

export default class OptionsPanelView extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            filter:"all"
        }
    }

    onFilterChange(e, b){

    }

    render() {
        return (
            <div>
                <RadioGroup name="options" onChange={this.onFilterChange}>
                  <div className="radio">
                    <label>
                      <Radio value="radio1" /> Radio 1
                    </label>
                  </div>
                  <div className="radio">
                    <label>
                      <Radio value="radio2" /> Radio 2
                    </label>
                  </div>
                </RadioGroup>
            </div>
        );
    }
}

[danielberndt]

which react-radio-group version are you using? v3.0.0 had a broken build, so please check if you're using v3.0.1

[kellyjanderson]

@danielberndt I am using "react-radio-group": "2.2.0", installed via npm with package.json.

[kellyjanderson]

Updated to 3.0.1 and it is rendering.

[subhojit777]

It is also working for me. Thanks.