I am trying to create dynamic fields based on my selected attributes. I have 2 array objects addAttributes
and fakeAttributes
. fakeAttributes are the details of selected attributes. I have a dropdown select component if I pass the addAttributes it will show the data. If I select any option from my select component it will store into the setAttributes
state.
Live code: https://codesandbox.io/s/summer-cloud-m0bvn?file=/src/App.js:1247-1678
const [attributes, setAttributes] = useState([{ label: '', value: 1 }])
const addAttributes = [
{ label: 'colors', value: 1 },
{ label: 'size', value: 2 },
]
// Attributes data
const fakeAttributes = [{
label: 'colors',
object: [
{ label: 'Black', value: 1 },
{ label: 'Green', value: 2 },
]
},
{
label: 'size',
object: [
{ label: 'M', value: 1 },
{ label: 'S', value: 2 },
]
}
]
Dropdown UI. I am using npm i react-select package for the dropdown.
This is my code where I am trying to filter and map those array objects if the value matches with the label it will show a text but the output is not showing also I did not get any error. The condition is matching.
<div className='flex flex-row gap-6'>
<div className="basis-1/4">
<label className="block text-sm font-medium text-gray-700 mb-3"> Size </label>
<Select options={addAttributes} onChange={(e: any) => setAttributes(e)} className="shadow appearance-none border rounded w-full text-gray-700 leading-tight focus:outline-none focus:shadow-outline" isMulti />
</div>
{fakeAttributes.map((attr) => {
attributes.filter((list) => {
console.log(typeof attr.label,":",attr.label,typeof list.label,":",list.label);
if (list.label === attr.label) {
console.log("ok I am in");
return <h2>Output</h2>;
}
});
})}
</div>
Can any one please help me? How can I solve it?