Is it possible to implement a value={values[“brandCategory”]}, onChange , boolean true false in renderBrandSelection so that when a specific brand is clicked then the brandselection appears.I dont know where the onChange should be implemented at
const renderBrandCategorySelection = () => {
return(
<div className={classes.input}>
<Typography variant="body1">
<FormattedMessage id="vcn.sub.customisation.brandCategory.label" />
</Typography>
<NativeSelect
name={"brandCategory"}
value={values["brandCategory"]}
onChange={handleCategoryChange.bind("brandCategory")}
inputProps={{
name: "brandCategory",
id: "brand-native-label-placeholder",
}}
fullWidth
error={touched["brandCategory"] && Boolean(errors["brandCategory"])}
>
<FormattedMessage id="vcn.sub.customisation.brandCategory.placeholder">
{(pleaseSelect) => <option value="" disabled hidden>{pleaseSelect}</option>}
</FormattedMessage>
{renderBrandCategoryOptions()}
</NativeSelect>
{touched["brandCategory"] && errors["brandCategory"] && (
<FormHelperText
error={touched["brandCategory"] && Boolean(errors["brandCategory"])}
>
<FormattedMessage id={errors["brandCategory"]} />
</FormHelperText>
)}
</div>
)
}
const renderBrandCategoryOptions = () => {
const brandCategoryOptions = brandCategoryList.map((input, id) => {
return (
<option id={“brandCategoryOption” + id.toString()} value={input.uuId} key={input.uuId}>
{input.categoryName}
);
});
return brandCategoryOptions;
}
const renderBrandSelection = () => {
return (
{!!applicableBrands.length > 0 ? (
applicableBrands.map((data, i) => {
return(
<div
id={“brandSelection” + i.toString()}
key={“brand-selection-” + i.toString()}
name={“brandSelection” + i.toString()}
className={
classes.customSelectionElements + ” ” +
(values[“brandName”] === data.uuId ? classes.activeSelect : “”)
}
style={{background: data.cardColorCode}}
onClick={() => handleBrandChange(data)}
>
{values[“brandName”] === data.uuId ?
: null}
)
})
) : (
)}
{touched[“brandName”] && errors[“brandName”] && (
<FormHelperText
error={touched[“brandName”] && Boolean(errors[“brandName”])}
>
<FormattedMessage id={errors[“brandName”]} />
)}
)
}