I have two divs one is displaying by default second one is hide by default. I have one <TextField /> dropdown list from react js material UI.
Now I want to hide first div and display second div if user selected value == 'Custom Value'
How can i do this?
My Code:-
function MyComponent() {
const inputSourceOptions = [
{ key: "Fax", value: "Fax" },
{ key: "Care Radius", value: "Care Radius" },
{ key: "Custom Value", value: "Custom Value" },
];
const handleChangeInput = (id, event) => {
console.log(event.target.value);
});
return (
<>
<TextField
className="ruleContainer"
select
name="rule_source"
label="Source"
variant="outlined"
size="small"
value={inputField.rule_source}
onChange={(event) =>
handleChangeInput(inputField.id, event)
}
>
{inputSourceOptions.map((opt) => (
<MenuItem key={opt.key} value={opt.key}>
{opt.value}
</MenuItem>
))}
</TextField>
<div style={{ display:'none'}}>this is div one</div>
<div>this is div two</div>
</>
);
}
export default MyComponent;Thanks for your support!