How to give fetch api within radio button in react native?

Question

I'm using this package for radio button. What I'm trying is to show the result of an api within Radio button.The api response contains 4 options. So I want to render text with 4 radio buttons but now I'm getting only a single radio button with text.This is how it will be

This is the code

{
  this.state.data.map(a => (
    <Card>
      <CardItem>
        <Text style={styl.textStyle}>
          {(a.content = a.content.replace(/(<([^>]+)>)/gi, ""))}
        </Text>
      </CardItem>
      <CardItem>
        <RadioGroup
          size={24}
          thickness={2}
          color="#9575b2"
          highlightColor="#ccc8b9"
          selectedIndex={1}
          onSelect={item => this._onSelect(item, i++)}
        >
          <RadioButton value={a.options}>
            <Text>{a.options}</Text>
          </RadioButton>
        </RadioGroup>
      </CardItem>
    </Card>
  ));
}

json response

{
                "type": "single",
                "hint": "",
                "explanation": ".",
                "content": "<p>3. The World Banks’ Doing Business Report 2018 was the fifteenth edition since its inception in 2003. Examine the following statements about the Report and select the correct answer using the codes given below.</p>\n<p>I. Doing Business uses 11 indicator sets to measure aspects of business regulation that matter for entrepreneurship.</p>\n<p>II. India is one of the 10 economies that improved the most in the areas measured by Doing Business as per the 2018 Report.</p>\n<p>III. South Asia is the only region not represented in the top 50 ranking for ease of doing business.</p>\n",
                "options": [
                    "(a) I, II and III are correct ",
                    "(b) Only I is correct ",
                    "(c) Only I and II are correct ",
                    "(d) Only III is correct "
                ],
                "correct": "1",
                "marks": 4,
                "user_marks": 0,
                "status": 0,
                "marked": null,
                "auto": 1
            },

Please help.Any help is really appreciated thank you.

Ankit Makwana · Accepted Answer · 2018-12-19 11:32:18Z

1

You can do something like this to make loop inside radiogroup to render your radio buttons according to json response.

<RadioGroup
  size={24}
  thickness={2}
  color="#9575b2"
  highlightColor="#ccc8b9"
  selectedIndex={1}
  onSelect={item => this._onSelect(item, i++)}
  >
  {
    a.options.map((item, key) =>
    (
      <RadioButton value={item}>
        <Text>{item}</Text>
      </RadioButton>
    ))
  }
</RadioGroup>

answered Dec 19, 2018 at 11:32

Ankit Makwana

2,56116 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pramod · Accepted Answer · 2018-12-19 11:13:45Z

0

When you get the response extract the option values from in state variable and then use that state variable where ever you want

.then((response) => response.json())
        .then((responseJson) => {
          this.setState({
            option_1_value:responseJson.options[0],
            option_2_value:responseJson.options[1],
        option_3_value:responseJson.options[2],
        option_4_value:responseJson.options[3],
          })
 })
 .catch((error) => {
          console.error(error);
 });

answered Dec 19, 2018 at 11:13

Pramod

1,96810 silver badges15 bronze badges

4 Comments

Anu Over a year ago

Is this is possible if the json response contains more than 4 options?

Pramod Over a year ago

Yes check the length of the options array and then add them by using loop.

Anu Over a year ago

So how it will be within rendering of RadioButton .What should be the value prop ? <RadioButton value={this.state.option_1} > ?

Pramod Over a year ago

For rendering the options in loop please check this link ----->>> stackoverflow.com/questions/42519800/…

Collectives™ on Stack Overflow

How to give fetch api within radio button in react native?

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related