Reputation: 79
I don't know where I am making mistake but I have tried all related videos and article but still not able to render dropdown list dynamically based on selected option in first dropdown. there are two dropdown first one has some option so I want to change or render different option list in second dropdown whenever user change or select any option in first dropdown. I don't know where I am making mistake. I using object array based data component as options data for second dropdown. where i change or select in first dropdown it got white screen.
Option.js
const Options = {
"Invoice Related" : ["buy","sell","hold"],
"Payment Related" : ["recieved","cancelled","rejected","blocked"]
}
export default Options;
Queryform.js
import React from 'react'
import Options from './FormOptions';
import { useState } from 'react';
const Queryform = () => {
const [dynamicOptions, setdynamicOptions] = useState([])
const selectedInput = (e) => {
const input = e.target.value;
console.log(input)
console.log(Options)
setdynamicOptions(Options[input])
}
return (
<div>
<select className="form-select form-select-sm" aria-label=".form-select-sm example"
onChange={selectedInput}>
<option selected>Category</option>
<option value="Invoice Related">Invoice Related</option>
<option value="Payment Related">Payment Related</option>
<option value="Tax Related">Tax Related</option>
<option value="Password Related">Password Related</option>
<option value="Browser /Content/ Technical Related">Browser /Content/ Technical Related</option>
<option value="MEDIANAMA Reports Related">MEDIANAMA Reports Related</option>
<option value="Subscription Related">Subscription Related</option>
</select>
</div>
<div>
<select className="form-select form-select-sm" aria-label=".form-select-sm example">
<option selected>Options</option>
{
dynamicOptions.forEach((opt) => {
<option value={opt}>{opt}</option>
})
}
</select>
</div>
)
export default Queryform;
Upvotes: 0
Views: 2019
Reputation: 3892
I fixed some errors:
<div />
elements, because this was giving me an error.dynamicOptions.forEach()
method with dynamicOptions.map()
.dynamicOptions
is defined.Working implementation: https://codesandbox.io/s/gallant-rhodes-0tbtwd?file=/src/QueryForm.js
Please try the following:
import React from "react";
import { useState } from "react";
const Options = {
"Invoice Related": ["buy", "sell", "hold"],
"Payment Related": ["recieved", "cancelled", "rejected", "blocked"]
};
const Queryform = () => {
const [dynamicOptions, setdynamicOptions] = useState([]);
const selectedInput = (e) => {
const input = e.target.value;
console.log(input);
console.log(Options);
setdynamicOptions(Options[input]);
};
return (
<>
<div>
<select
className="form-select form-select-sm"
aria-label=".form-select-sm example"
onChange={selectedInput}
>
<option selected>Category</option>
<option value="Invoice Related">Invoice Related</option>
<option value="Payment Related">Payment Related</option>
<option value="Tax Related">Tax Related</option>
<option value="Password Related">Password Related</option>
<option value="Browser /Content/ Technical Related">
Browser /Content/ Technical Related
</option>
<option value="MEDIANAMA Reports Related">
MEDIANAMA Reports Related
</option>
<option value="Subscription Related">Subscription Related</option>
</select>
</div>
<div>
{dynamicOptions && (
<select
className="form-select form-select-sm"
aria-label=".form-select-sm example"
>
<option selected>Options</option>
{dynamicOptions.map((opt) => (
<option value={opt}>{opt}</option>
))}
</select>
)}
</div>
</>
);
};
export default Queryform;
Upvotes: 1