如何在单击单选按钮时对 map 数据做出反应？

Question

Iam trying to display data in react js. Whenever user selects a radio button the data in the api should be displayed according to option selected by the user. i have mapped my radio button component. now i want it to display data according to selected option. the value coming rom the api is mapped below and i have commented on the section where i want to display my text.the parameter is reward_description which is to be mapped.

My code is below

import React, { Component } from "react";
import {
  ModalComponent,
  GiftCardComp,
  RadioInputComponent,
} from "../../../components/index";
import IntlMessages from "../../../common/constants/IntlMessages";

export default class Comp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      giftCard: "",
      giftDescription: ""
    };
  }
  render() {
        let {giftDescription} = this.state
    return (
      <React.Fragment>
        <ModalComponent
          isOpen={this.props.isOpenPayment}
          toggle={this.props.paymenToggle}
          className="customModel"
          size="lg"
          body={
            <React.Fragment>
              <div className="modal-col">
                <div className="product-box">
                  <div className="product-img">
                    <a href="#">
                      <img
                        src={this.props.giftDetails.desktop_image}
                        alt="product-name"
                      />
                    </a>
                  </div>
                  <div className="product-description">
                    <div className="product-description-text">
                      <h3 className="mx-auto">
                        <a href="#">{this.props.giftDetails.heading}</a>{" "}
                      </h3>
                    </div>
                  </div>
                  <GiftCardComp
                    information={null}
                    description={
                      <React.Fragment>
                       
                    sideBarHtml={
                      <React.Fragment>
                        <h3><IntlMessages id="gift.radio-heading" /></h3>

                        <RadioInputComponent
                          title="giftCard"
                          value={this.state.giftCard}
                          name={this.props.giftDetails.variations.map(
                            (e) => e.reward_text
                          )}
                          onChange={(e) => {
                            this.setState({ giftCard: e.target.value });
                          }}
                          onClick={(e) => {
                            this.setState({ giftDescription: e.target.value });
                          }}
                        />
                         <p dangerouslySetInnerHTML={{ __html: giftDescription}}/>
                        <hr />
                        
                      </React.Fragment>
                    }
                  </React.Fragment>
                </div>
              </div>
            </React.Fragment>
          }
        />
      </React.Fragment>
    );
  }
}

My API Response

"variations": [ { "variation_id": 1, "variation_name": "210kr", "price": "210", "reward_text": "200kr. Price", "reward_description": "Med et gavekort til Sendentanke.dk kan du vælge mellem gavekort til hundredevis af butikker og oplevelser ét sted.Med et gavekort til Sendentanke.dk kan du vælge mellem gavekort til hundredevis af butikker og oplevelser ét sted.Med et gavekort til Sendentanke.dk kan du vælge mellem gavekort til hundredevis af butikker og oplevelser ét sted.Med et gavekort til Sendentanke.dk kan du vælge mellem gavekort til hundredevis af butikker og oplevelser ét sted." }, { "variation_id": 2, "variation_name": "400kro", "price": "400", "reward_text": "400 Price", "reward_description": "Med et gavekort til Sendentanke.dk kan du vælge mellem gavekort til hundredevis af butikker og oplevelser ét sted." } ],

Answer 1

I created header a small component that showcase what I talked about here you have no value and when you start to pick it had the component. if you want to start with someone checked add checked and in the state add his value

const Radios = () => {
      const [value, setValue] = React.useState("");
      return (
        <div>
          <div>
            <input
              type="radio"
              id="huey"
              name="drone"
              value="huey"
              onChange={(e) => setValue(e.target.value)}
            />
            <label for="huey">Huey</label>
          </div>
    
          <div>
            <input
              type="radio"
              id="dewey"
              name="drone"
              value="dewey"
              onChange={(e) => setValue(e.target.value)}
            />
            <label for="dewey">Dewey</label>
          </div>
    
          <div>
            <input
              type="radio"
              id="louie"
              name="drone"
              value="louie"
              onChange={(e) => setValue(e.target.value)}
            />
            <label for="louie">Louie</label>
          </div>
    
          {value === "huey" ? (
            <h1>Huey</h1>
          ) : value === "dewey" ? (
            <h1>Dewey</h1>
          ) : value === "louie" ? (
            <h1>Louie</h1>
          ) : null}
        </div>
      );
    };