React Component Reuse with 2 similar components
You can take advantage of conditional rendering to concisely render the iconFile if it exists, and use the conditional operator to construct the outer class name. Using two separate classes for nearly identical functionality is pretty WET, I wouldn't recommend it.

Because the iconFile variable actually contains a string (if it exists), not a File, consider naming it something else, maybe iconPath:

&lt;label htmlFor={radioId} className="radio-buttons"&gt;
    &lt;div className={"label-inner" + (iconPath ? "" : " no-img")}&gt;
        {iconPath &amp;&amp; &lt;div&gt;&lt;img src={"/img/" + iconPath} /&gt;&lt;/div&gt;}
        &lt;div&gt;&lt;span&gt;{text}&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/label&gt;


You currently reference properties of this.props a lot. Consider destructuring them all immediately instead.

Since you're using ES6+ syntax, always use const, never use var.

It sounds like Field is using the component prop as a tag name. Because variable tag names in JSX need to be upper-case, and because Component could easily be mistaken for React.Component, consider using a different name, maybe Tag.



const Field = ({ name, Tag, type, value, id }) =&gt; (
    &lt;Tag name={name} type={type} value={value} id={id} /&gt;
);
class RadioImage extends React.Component {
    render() {
        const { radioGroup, value, iconPath, text } = this.props;
        const radioId = radioGroup + value.replace(" ", "");
        return (
            &lt;div className="option"&gt;
                &lt;Field
                    name={radioGroup}
                    Tag="input"
                    type="radio"
                    value={value}
                    id={radioId}
                /&gt;
                &lt;label htmlFor={radioId} className="radio-buttons"&gt;
                    &lt;div className={"label-inner" + (iconPath ? "" : " no-img")}&gt;
                        {iconPath &amp;&amp; &lt;div&gt;&lt;img src={"/img/" + iconPath} /&gt;&lt;/div&gt;}
                        &lt;div&gt;&lt;span&gt;{text}&lt;/span&gt;&lt;/div&gt;
                    &lt;/div&gt;
                &lt;/label&gt;
            &lt;/div&gt;
        );
    }
}

ReactDOM.render(
    // The Fragments below can be replaced with &lt;&gt;  &lt;/&gt; with an up-to-date Babel
    // (Stack Snippets do not support it)
    &lt;React.Fragment&gt;
        &lt;RadioImage radioGroup="radioGroup" value="value1" text="text1" /&gt;
        &lt;RadioImage radioGroup="radioGroup" value="value2" iconPath="iconPath" text="text2 with icon" /&gt;
    &lt;/React.Fragment&gt;
    ,
    document.getElementById('root')
);
&lt;div id="root"&gt;&lt;/div&gt;
&lt;script src="https://unpkg.com/react@16/umd/react.production.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"&gt;&lt;/script&gt;




You might consider avoiding IDs when possible - they implicitly create global variables, which aren't always the best idea when avoidable. You can move the &lt;input&gt; inside the &lt;label&gt; so that no htmlFor={radioId} is needed.

You can make RadioImage a stateless functional component if you want, it doesn't look to have any need to be stateful:



const Field = ({ name, Tag, type, value, id }) =&gt; (
    &lt;Tag name={name} type={type} value={value} id={id} /&gt;
);
const RadioImage = ({ radioGroup, value, iconPath, text }) =&gt; (
    &lt;div className="option"&gt;
        &lt;label className="radio-buttons"&gt;
            &lt;Field
                name={radioGroup}
                Tag="input"
                type="radio"
                value={value}
            /&gt;
            &lt;div className={"label-inner" + (iconPath ? "" : " no-img")}&gt;
                {iconPath &amp;&amp; &lt;div&gt;&lt;img src={"/img/" + iconPath} /&gt;&lt;/div&gt;}
                &lt;div&gt;&lt;span&gt;{text}&lt;/span&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/label&gt;
    &lt;/div&gt;
);
ReactDOM.render(
    // The Fragments below can be replaced with &lt;&gt;  &lt;/&gt; with an up-to-date Babel
    // (Stack Snippets do not support it)
    &lt;React.Fragment&gt;
        &lt;RadioImage radioGroup="radioGroup" value="value1" text="text1" /&gt;
        &lt;RadioImage radioGroup="radioGroup" value="value2" iconPath="iconPath" text="text2 with icon" /&gt;
    &lt;/React.Fragment&gt;
    ,
    document.getElementById('root')
);
.option {
  border: 1px solid black;
}
&lt;div id="root"&gt;&lt;/div&gt;
&lt;script src="https://unpkg.com/react@16/umd/react.production.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"&gt;&lt;/script&gt;