SVG file inside React JSX - reactjs

Question

I have the following:
class IconsHolder extends React.Component {
handleClick (e) {
var current = e.target.getAttribute("data-icon-id");
if(current == 1){
this.props.setSlotA(true);
this.props.setSlotB(false);
this.props.setSlotC(false);
}
else if(current == 2) {
this.props.setSlotA(false);
this.props.setSlotB(true);
this.props.setSlotC(false);
}
else if(current == 3) {
this.props.setSlotA(false);
this.props.setSlotB(false);
this.props.setSlotC(true);
}
}
render () {
var a = this.props.slotA ? "active" : "",
b = this.props.slotB ? "active" : "",
c = this.props.slotC ? "active" : "";
return (
<div className="icons-holder">
<div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1090.8 1542.8" style="enable-background:new 0 0 1090.8 1542.8;" xmlSpace="preserve">
<path class="st0" d="M764.9,559c0,0,28.2-35.6,40.2-68.3"/>
<g>
<path d="M430.4,233.8c4.5,0,18.7,2.7,31.7,6.1c13.8,3.6,46.1,8.9,78.5,8.9c31.1,0,57.9-1.2,70-3.1c6.5-1,13.7-2.7,18.9-3.9
c2.5-0.6,5.3-1.2,6.6-1.5c1.2,0.7,3.6,2.6,4.6,3.5c0.8,0.6,1.4,1.2,2,1.6c1.8,1.4,4,1.8,6.3,2.3c1.9,0.4,4.1,0.9,6.2,1.9
c1.8,0.9,5.2,3.8,8.3,6.3c4.4,3.7,9,7.5,12.9,9.3c2.3,1.1,4.9,2.8,7.7,4.6c3.8,2.5,7.7,5.1,11.7,6.5c2.5,0.9,5.8,1.9,9.3,3
c5.2,1.6,11.2,3.5,14.9,5.1c2.6,1.1,11.7,6.2,20.6,11.1c12.8,7.1,26,14.5,31.5,16.7c3.7,1.5,9.8,3.7,16.2,6
c7.5,2.7,18.8,6.8,20.8,7.9c0,0,0,0,0,0c0.2,0.8,0.6,2.2,1.8,3.4c0.7,0.7,1.5,1.2,5,3.4c5.1,3.2,13.8,8.6,22,15
c12.6,9.8,33.5,30.4,40.1,43.8c0.6,1.2,1.2,2.5,1.9,3.8c6.8,13.7,14.4,29.2,17.7,45c2.8,13.3,5.4,37.4,7.3,55
c0.6,5.8,1.2,10.8,1.6,14.3c1.8,14.6,8.1,40.6,10.9,49.9c1,3.4,1.9,6.2,2.5,8.3c-0.3,0-0.6,0-0.9,0c-1.8,0-4.5,0.3-8,0.7
c-3.4,0.4-7.3,0.8-10.9,1.1c-1.9,0.1-7.1,0.2-13.7,0.2c-20,0.2-53.5,0.5-66.6,3.4c-12.2,2.7-27,7.2-34.9,9.7
c-0.6,0.2-1.1,0.3-1.6,0.5c-0.4-2.2-1.2-4.3-2.6-6.5c0,0,0-0.1,0-0.1c1-4.3-0.3-7.5-3.9-9.3c-1-0.5-1.9-0.9-2.6-1.2
c-0.3-3-2.2-5.4-3.4-6.7c-1.1-1.2-4-4-7.4-4c-0.1,0-0.3,0-0.4,0c-3.9,0.3-6.4,2.1-7.5,5.4c-0.8,2.4-4.2,10.8-5.9,12.9l-0.3,0.4
c-3.1,3.9-3.3,5.1-3.7,11.4c-0.1,1.6-0.2,5.6-0.3,11.7c-0.4,18.4-1.3,56.7-4,96.5c-3.4,51.6-6.9,88-8.5,99.9
c-0.2,1.5-0.4,3-0.6,4.3c-1.2,8.7-1.9,14-0.4,28.7l0,0l0,0c0.1,0.7,7.6,65.4,8.6,74c0.6,4.9,2.2,15.7,3.8,26.1
c1.3,8.5,2.5,16.5,3.1,21c0.6,4.5,1.8,10.8,3.2,18.1c1.9,9.6,4,20.6,5.2,30.2c1.6,12.6,2.6,39.4,3.4,57.2c0.2,6,0.4,11.3,0.6,14.5
c0.4,7.1,3,21.7,5.8,37.2c2.3,12.5,4.6,25.5,5.7,34.5c2.3,18.4,5.4,35.7,7.1,40.3c0.4,1.2,0.5,3.4,0.6,5.6c0.1,2.2,0.1,4.6,0.5,6.9
c0.9,4.7,2.6,9.4,2.7,9.6l0.2,0.8c-1.5,2.1-5.6,6.6-10.9,7.6c-3.6,0.7-15.2,1.3-30.6,1.3c-14.6,0-27.7-0.6-37-1.7
c-19.6-2.3-56.8-6.2-86.7-6.2c-6.1,0-11.6,0.2-16.5,0.5c-29.6,1.9-101.2,2.7-124.7,2.7c-2.3,0-4.2,0-5.8,0c-0.6,0-1.2,0-1.7,0
c-9.6,0-18.5,0.7-26.4,1.3c-5.9,0.5-11,0.9-15.1,0.9c-0.6,0-1.2,0-1.7,0c-2.6-0.1-6.1-0.4-10-0.7c-6.6-0.5-14.7-1.2-22.5-1.2
c-5.3,0-9.8,0.3-13.7,0.9c-13.3,2-39.2,5.3-52.3,5.3c-1.5,0-2.8,0-3.9-0.1c-2.9-0.3-5.7-0.3-8.1-0.4c-7.6-0.2-10.2-0.5-11.8-3.3
c-0.7-1.2-1.4-2.3-2-3.4c-3.5-5.8-6.3-10.5-4.8-17.6c2.2-10,6.5-34.9,9.1-58.9c0.8-7,1.8-14.9,2.8-23.4c2.3-18.6,4.9-39.6,5.7-55.6
c0.4-8.1,1.1-17.9,1.8-27.4c1.5-21.1,2.4-34.3,1.7-38.6c-0.9-5.5,0.1-15.1,1.2-21.7c0.5-2.8,1-7.6,1.7-13.7
c1.1-9.8,2.5-23.1,4.7-36.8c5.1-32.4,11-74.5,10.4-90.8c-0.6-16.9-6.3-80.7-9.7-117.3c-1.8-19.7-2.8-36.5-3.5-48.7
c-0.4-7.1-0.8-12.7-1.1-17c-0.5-5.5-1.6-13.2-2.9-21.4c-1.4-9.5-2.9-19.4-3.6-27.4c-1.5-17.7-4.5-25.9-10.3-28.2
c-1-0.4-2.2-0.6-3.4-0.6c-3.3,0-7.2,1.5-12,4.7c-0.1,0.1-0.4,0.2-0.6,0.3c-1.9,0.8-5.7,2.4-6.9,7.7c-0.8,3.5-1.2,9.6-1.3,11.5l0,0
c-0.3,0.1-1.9,0.6-4.5,0.6c-2.6,0-5.4-0.4-8.4-1.3c-2.3-0.7-4.6-1.4-7.1-2.2c-9.1-3-19.5-6.3-30.1-6.3c-0.4,0-0.8,0-1.3,0
c-0.8,0-1.6,0-2.3,0c-9.9,0-19.6-1.7-32.9-4c-2.2-0.4-4.4-0.8-6.8-1.2c-6.1-1-13-1.8-19.7-2.5c-7-0.7-17-1.8-21.3-3.1
c0.9-2.9,1.9-5.4,3.4-9c0.3-0.6,0.6-1.3,0.9-2.1c1.7-4,2.2-7.4,2.6-10.1c0.3-1.8,0.5-3.3,1-4.6l0.2-0.7c1.9-5.4,7-19.8,8-32.1
c2-24.9,5.8-46.4,10.8-62.1l0,0l0,0c0.1-0.4,10.9-35.5,20.7-48.7c10.9-14.5,27.9-34.5,41.3-46.5c13.8-12.3,20.4-17.5,29.8-22
c4.1-2,8.9-3.7,13.5-5.4c6.4-2.4,13-4.8,18.6-8c5.3-3,24.8-13.8,43.7-24.2c13.9-7.6,27-14.9,34.5-19.1c3.1-1.7,6-3.3,8.7-4.8
c17.7-9.8,23.9-13.3,26-16.2c1.2-1.8,1.7-3.4,2-4.5c0.1-0.2,0.1-0.5,0.2-0.6c0.5-0.3,1.2-0.5,2.1-0.8c2.1-0.6,4.9-1.5,7.8-4.4
c1.8-1.8,6.1-6.1,9-6.3C430.2,233.8,430.3,233.8,430.4,233.8 M430.4,228.8c-0.2,0-0.4,0-0.6,0c-4.5,0.2-9,4.5-12.2,7.8
s-6.2,2.8-9,4.5s-1.8,4-3.5,6.5s-15,9.5-33,19.5s-69,38-78.2,43.2s-21.8,8.5-31.8,13.2c-10,4.8-17,10.2-31,22.8s-31.5,33.2-42,47.2
s-21.5,50.2-21.5,50.2c-7.2,22.8-10,51-11,63.3s-6.5,27.2-8,31.5s-1,8.5-3.5,14.5s-3.9,9.1-5.2,14.4c-1.3,5.3,27.2,5.8,45.8,9
c17.5,3,28.5,5.2,40.5,5.2c0.8,0,1.6,0,2.5,0c0.4,0,0.8,0,1.1,0c12.6,0,25.3,5.3,35.9,8.3c4,1.2,7.3,1.5,9.8,1.5
c4.4,0,6.7-1.1,6.7-1.1c3.8-0.8,2.9-3.8,2.9-3.8s0.3-7.5,1.2-11.2c0.8-3.7,3.8-3.8,5.3-4.8c1.3-0.9,5.9-3.9,9.3-3.9
c0.6,0,1.1,0.1,1.5,0.3c3.3,1.3,5.8,8.7,7.2,24c1.3,15.3,5.5,37.3,6.5,48.8s1.8,34.7,4.7,65.7c2.8,31,9,99.5,9.7,117
c0.7,17.5-6.8,67.5-10.3,89.8c-3.5,22.3-5.2,43.5-6.3,50.5s-2.2,17.2-1.2,23.3c1,6.2-2.3,42.2-3.5,65c-1.2,22.8-6,55.8-8.5,78.7
s-6.7,47.7-9,58.3c-2.3,10.7,3.2,17.2,7.3,24.5c4.2,7.3,12.5,5.2,23.8,6.2c1.2,0.1,2.7,0.2,4.3,0.2c13.6,0,39.9-3.4,53-5.3
c4-0.6,8.4-0.8,13-0.8c12.1,0,25,1.6,32.4,1.8c0.6,0,1.2,0,1.9,0c9.9,0,24.7-2.2,41.5-2.2c0.6,0,1.1,0,1.7,0c1.5,0,3.5,0,5.8,0
c25.7,0,96.1-0.9,125-2.7c5-0.3,10.5-0.5,16.2-0.5c30,0,67.1,3.9,86.1,6.1c10.7,1.3,24.8,1.7,37.6,1.7c14.4,0,27.2-0.6,31.5-1.4
c8.2-1.5,13.8-8.8,15-11c1.2-2.2-0.5-4-0.5-4s-1.7-4.5-2.5-8.8c-0.8-4.3,0-9.8-1.3-13.3c-1.3-3.5-4.3-19.2-6.8-39.2
s-10.8-58.8-11.5-71.3c-0.7-12.5-1.8-54.8-4-72c-2.2-17.2-7.2-38.2-8.5-48.3c-1.3-10.2-5.8-38.3-6.8-47c-1-8.7-8.6-74-8.6-74
c-1.7-16.3-0.5-20.2,1-31.9c1.5-11.7,5-47.5,8.5-100.2c3.5-52.7,4-102.1,4.3-108.2c0.4-6.1,0.4-5.9,2.9-9c2.5-3.1,6.2-13,6.8-14.5
s1.4-1.9,3.1-2c0,0,0.1,0,0.1,0c1.8,0,6,3.9,5.8,6.9c-0.2,3,1.9,2.6,5.2,4.4c3.4,1.8-0.1,4.6,1.5,7c1.6,2.4,2.8,5.1,2.4,7.9
c-0.3,2.3,1.2,2.5,2.2,2.5c0.2,0,0.3,0,0.4,0c0.8,0,23-7.4,39.9-11.1c16.9-3.8,71.5-3,79.5-3.5c7.4-0.5,15.5-1.8,18.6-1.8
c0.3,0,0.5,0,0.7,0c2.1,0.2,4.9,2.1,6.2,2.1c0.1,0,0.3,0,0.4-0.1c1.1-0.5-0.1-3.2-0.1-3.2s-1.2-4.5-4-13.5s-9-34.8-10.8-49
s-5.2-51.8-9-69.8s-12.8-35.2-20-50s-29.2-36-41.5-45.5s-25.5-17-26.5-18s0.2-2-2.5-4s-28.8-10.8-38-14.5s-45.5-25-52-27.8
s-18.2-6-24.5-8.2s-13-8.2-19-11s-16-13-21-15.5s-9.8-2.2-11.8-3.8s-7-6.2-9.2-6.2s-15.5,3.8-26.8,5.5s-37.2,3-69.2,3
s-63.8-5.2-77.2-8.8C450.3,231.7,435.5,228.8,430.4,228.8L430.4,228.8z"/>
</g>
<path class="st1" d="M420.4,247c0,0,47,14,107.7,14s78.7-2,129.7-13"/>
<path class="st0" d="M157.3,546c0,0,115.3,23.3,131.3,24.3"/>
<path class="st0" d="M297.4,564.8c0,0-26.9-16.5-54.3-37"/>
<path class="st0" d="M298.4,564.9c0,0-18.5-11.4-38.6-48.7"/>
<path class="st2" d="M298.4,564.9c0,0-36.9-69.9-32.2-120.3c4.7-50.3,3.2-56.7-12.8-113.3"/>
<path class="st2" d="M813.3,328.8c-22.9,71.7-13.8,55.8-19.8,127.8S764.9,559,764.9,559"/>
<path class="st0" d="M770.4,562.5c0,0,21.8-22.3,43.6-47.5"/>
<path class="st0" d="M770.4,562.5c0,0,15.7-18.3,49.2-31"/>
<path class="st0" d="M908.1,551.3c0,0-76.8-0.2-129.2,20.2"/>
<path class="st2" d="M294.1,1180.3c0,0,3.3,12,24.3,12.7c21,0.7,69.7-8,93.3-8s71.3,5,136.3,4.7s84.3-6.7,122.7-5.3
c38.3,1.3,73.7,9.3,88.7,6.7c15-2.7,22.8-7.7,22.8-7.7"/>
<path class="st0" d="M763.8,559.2c-1-1.6,2.8-29.4-4.5-64"/>
<path class="st0" d="M301.6,565.3c0,0-5.8-11.3-0.2-29.3c2.4-7.5,5.6-17.1,8.5-25.8"/>
<path class="st1" d="M284.4,615.3"/>
</svg>
</div>
<div className={a}>
<div
onClick={this.handleClick.bind(this)}
data-icon-id={1}
className={this.props.optionA.name}>
</div>
<p className={this.props.optionA.name}>{this.props.optionA.option_name}</p>
</div>
<div className={b}>
<div
onClick={this.handleClick.bind(this)}
data-icon-id={2}
className={this.props.optionB.name}>
</div>
<p className={this.props.optionB.name}>{this.props.optionB.option_name}</p>
</div>
<div className={c}>
<div
onClick={this.handleClick.bind(this)}
data-icon-id={3}
className={this.props.optionC.name}>
</div>
<p className={this.props.optionC.name}>{this.props.optionC.option_name}</p>
</div>
</div>
);
}
}
when this component gets rendered I get the following error:
invariant.js:44 Uncaught Error: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by IconsHolder.
at invariant (invariant.js:44)
at assertValidProps (ReactDOMComponent.js:151)
at ReactDOMComponent.mountComponent (ReactDOMComponent.js:446)
at Object.mountComponent (ReactReconciler.js:46)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:238)
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697)
at ReactDOMComponent.mountComponent (ReactDOMComponent.js:516)
at Object.mountComponent (ReactReconciler.js:46)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:238)
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697)
I have already made some changes on the attributes (like removing : and capitalising the first letter after )