I'm trying to style dynamically created radio buttons in React created using the Reactstrap library. I've looked at other information and found that typically when styling radio buttons they will hide them, create a new style and link the button to the new style. However, I'm not sure how to do this in this case since my buttons are mapped to data that I am pulling from drupal. Anyways, thanks in advance for the help.
Here's the link to the bootstrap library. https://reactstrap.github.io/components/form/
And here's my code for the page:
import React, { Component} from 'react';
import '../../css/Home.css';
import MenuBar from "../sub-components/MenuBar";
import LeftMenuBar from "../sub-components/LeftMenuBar";
import "../../css/ProductPage.css"
import WomensWear from "../../media/WomensWear.jpg"
import {addToCart} from "../../actions/addToCart";
import {
FormGroup,
Input,
Label
} from "reactstrap";
class ProductPage extends Component {
constructor(props) {
super(props);
this.state = {
selectedVariation: null
}
}
cartAdd = (e) => {
this.props.dispatch(addToCart({
purchased_entity_id: this.state.selectedVariation,
purchased_entity_type: 'clothing',
quantity: 1
}));
console.log("clicked");
};
getProduct() {
console.log(this.state);
let product = null;
if (this.props.products && this.props.products.items.length) {
product = this.props.products.items.find(o => o.path[0].alias === this.props.router.match.url);
if (product && this.props.variations.items.length && this.props.attributes.items.length) {
product.something = []; product.sizes = []; product.colors = [];
for (let i = 0; i < product.variations.length; i++) {
let varid = product.variations[i].target_id;
let variation = this.props.variations.items.find(o => o.variation_id[0].value === varid);
variation.size = this.props.attributes.items.find(o => o.attribute_value_id[0].value === variation.attribute_size[0].target_id);
variation.color = this.props.attributes.items.find(o => o.attribute_value_id[0].value === variation.attribute_color[0].target_id);
let sizeID = product.sizes.find(o => o.value === variation.size.attribute_value_id[0].value);
if (!sizeID) {
product.sizes.push({value: variation.size.attribute_value_id[0].value, name: variation.size.name[0].value});
}
let color = product.colors.find(o => o.value === variation.color.attribute_value_id[0].value);
if (!color) {
product.colors.push({value: variation.color.attribute_value_id[0].value, name: variation.color.name[0].value});
}
product.something.push(variation);
// product.price.push({value: variation.price.attribue_value[0].value, name: variation.price.name[0].value});
}
}
console.log(product);
}
return product;
}
updateSize = (e,product) => {
this.setState({selectedSize: e.target.value});
};
// updateColor = (e,product) => {
//
// let color = product.something.find(o => o.attribute_size[0].target_id === parseInt(e.target.value));
//
// console.log(color);
//
// this.setState({selectedSize: size.variation_id[0].value});
// };
render() {
let style = {
height: this.props.height - 56,
};
let product = this.getProduct();
// if (product && product.something.length) {
// let variation = this.state.selectedVariation ? this.state.selectedVariation : product.something[0];
// console.log(variation);
// }
let body = product && product.body.length ? product.body[0].value : null;
return (
<div className="App" id="default">
<div className='MenuBar'>
<MenuBar/>
</div>
<div>
<div style={style} className="ProductPage row no-gutters">
<div className="col-xs-3 col-md-3">
<LeftMenuBar/>
</div>
<div className="outer col-xs-4 col-md-4">
<div>
<div id="ProductPlacement">
<img src={WomensWear} alt=""/>
<div id="alternate-pics">
<div id="alt-pic">
</div>
<div id="alt-pic">
</div>
<div id="alt-pic">
</div>
</div>
</div>
</div>
</div>
<div className="col-xs-5 col-md-5">
<div id="ImagePlacement">
<div className="ProductTitle">
<h1>First Product</h1>
</div>
<hr/>
<div className="ProductDescription">
<div dangerouslySetInnerHTML={{__html: body}} />
</div>
<div id="options">
<FormGroup>
<Input type="select" name="select" id="override" onChange = {(e) => this.updateSize(e,product)}>
{product && product.sizes && product.sizes.map (size => (
<option value={size.value}>{size.name}</option>
))}
</Input>
</FormGroup>
<FormGroup tag="fieldset">
<FormGroup check onChange = {(e) => this.colorSelect(e,product)}>
{product && product.sizes && product.colors.map (color => (
<Label check htmlFor="radio1">
<Input type="radio" name="radio1" />{' '}
</Label>
))}
</FormGroup>
</FormGroup>
<div className="AddToCart">
<button onClick = {(e) => this.cartAdd()} className="AddToCart">Add To Cart</button>
{/*<button className="Price">value={variation.price}</button>*/}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default ProductPage;