If you want to show an element when a radio button is selected, you can place the element next to the label content.

<label>
 <input type="radio" checked={isChecked}>
 Yes {isChecked && <div> Comment with Input... </div>}
</label>

As you trying for dynamic fields based on JSON, you might need to do some changes in the JSON to achieve that. I have updated my solution here. I hope this would solve your problem.

https://codesandbox.io/s/funny-waterfall-i2ccm3?file=/src/App.js

 import React from "react";
 import "./styles.css";
 const FIELDS = {
   wishToAdd: {
     name: "wishToAdd",
     id: "wishToAdd",
     type: "radio",
     required: true,
     options: {
       yes: {
         displayName: "Yes!!!",
         id: "yes",
         value: "Yes",
         meta: {
           name: "comment",
           id: "txtComment",
           dataRequired: true,
           value: "",
           displayName: "Comment",
           type: "text",
           required: true,
           maxlength: 100,
           autoFocus: true
         }
       },
       no: {
         displayName: "No!!!",
         id: "no",
         value: "No",
         meta: {
           name: "comment",
           id: "txtComment",
           dataRequired: true,
           value: "",
           displayName: "Comment",
           type: "text",
           required: true,
           maxlength: 100,
           autoFocus: true
         }
       }
     }
   },
   comment: {
     name: "comment",
     id: "txtComment",
     dataRequired: true,
     value: "",
     displayName: "Comment",
     type: "text",
     required: true,
     maxlength: 100,
     autoFocus: true
   }
 };

 class TextField extends React.Component {
   constructor(props) {
     super(props);
   }

   render() {
     const field = this.props.field;
     const values = this.props.values;
return (
  <div className="input-group">
    <input
      type={"text"}
      name={field.name}
      data-required={field.dataRequired}
      id={field.id}
      value={values[field.name].value}
      maxLength={field.maxlength}
      className="form-control flashcard"
      autoFocus={field.autoFocus}
    />
  </div>
);
   }
 }

 class Radio extends React.Component {
   constructor(props) {
     super(props);
   }

render() {
    const field = this.props.field;
    const options = this.props.field.options;
    const opt = this.props.opt;
    const values = this.props.values;
    return (
    <>
        <input
      type={field.type}
      name={field.name}
      id={field.id}
      value={options[opt].value}
      className="form-control flashcard radio"
      onChange={(e) => this.props.handleRadioChange(field, e)}
      autoFocus={field.autoFocus}
      checked={values[field.name].value === options[opt].value}
    />
    <span className="lbl text-center">{options[opt].displayName}</span>
     </>
    );
 }
}

class RadioFieldSection extends React.Component {
constructor(props) {
    super(props);
 }

 render() {
    const field = this.props.field;
 const options = this.props.field.options;
 const values = this.props.values;
 return (
   <div className="check-group">
      {Object.keys(options).map((opt) => (
      <div>
        <label className="orgRadio" key={options[opt].id}>
          <Radio
            field={field}
            values={values}
            handleRadioChange={this.props.handleRadioChange}
            opt={opt}
          />
          {values[field.name].value === options[opt].value && (
            <>
              <pre>{JSON.stringify(options[opt].meta)}</pre>
              Comment
              {options[opt].value == "Yes" && (
                <TextField
                  field={field}
                  values={values}
                  handleChange={this.props.handleChange}
                ></TextField>
              )}
            </>
          )}
        </label>
          <br />
          </div>
      ))}
      </div>
 );
 }
}
class Fieldset extends React.Component {
  constructor(props) {
   super(props);
  }

 showField = () => {
   let add = this.props.values.wishToAdd.value;
   if (this.props.field.name === "comment") {
     return add === "Yes" ? true : false;
   } else {
     return true;
    }
  };

render() {
  const field = this.props.field;
  const values = this.props.values;

   return (
   <div>
      {
           <div className="form-group org-new">
        <label htmlFor={field.id}>{field.displayName}</label>
          <div className="row">
          <div className="col-sm-12">
            <div className="has-feedback">
              {field.type === "radio" && (
                <RadioFieldSection
                  field={field}
                  values={values}
                  handleRadioChange={this.props.handleRadioChange}
                ></RadioFieldSection>
              )}
              </div>
              </div>
            </div>
        </div>
     }
      </div>
   );
  }
}

class Form extends React.Component {
  constructor(props) {
    super(props);
  }

render() {
 const fields = this.props.fields;
   const values = this.props.values;
    return (
      <div>
     {fields.map((field) => (
          <div key={field.id}>
            <Fieldset
          field={field}
          values={values}
          handleChange={this.props.handleChange}
          handleRadioChange={this.props.handleRadioChange}
        ></Fieldset>
      </div>
     ))}
      </div>
    );
 }
}

class Content extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
  return (
     <form method="POST">
      <h1 className="font-xl">{this.props.header}</h1>
      <Form
       prevStep={this.props.prevStep || false}
         nextStep={this.props.nextStep}
        handleChange={this.props.handleChange}
        handleRadioChange={this.props.handleRadioChange}
        values={this.props.values}
       fields={this.props.fields}
     ></Form>
   </form>
  );
 }
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     wishToAdd: {
      value: "",
      valid: null
    },
    comment: {
      value: "",
      valid: null
     }
   };
 }

   handleRadioChange = (field, e) => {
     this.setState({
       [field.name]: {
         value: e.target.value,
         valid: true
       }
     });
   };

   render() {
     const { wishToAdd, comment } = this.state;
     const values = { wishToAdd, comment };
let fields = [FIELDS.wishToAdd, FIELDS.comment];
return (
  <div>
    <Content
      handleChange={this.handleChange}
      handleRadioChange={this.handleRadioChange}
      values={values}
      fields={fields}
      buttonText="Add"
      header="Wish to add comment?"
    />
  </div>
);
   }
 }

 export default Page;

I have a large set of FIELDS(which includes “text”, “select”, “radio”) and place them on our page.

I’m iterating the FIELDS objects and rendering them in the same order. Below case,
If the customer press “Yes” the comment section will be displayed If “No” we need to remove that.

In this case alone I wanted to place the input box next to the Yes option after the customer chooses “Yes”.

Like below

https://codesandbox.io/s/wizardly-nash-0vwpl4