How can I add dynamic fields based on my selected attributes in react js?

Question

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: https://codesandbox.io/s/dank-fog-1vue7?file=/src/AddProducts/AddProducts.js

 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 create dynamic fields but the output is not showing also I did not get any error. Suppose I have selected colors attribute it will create dynamic filed which name should be 'color' with the values. Also If I select both then it will create 2 dynamic fields with their values(colors, size, ).


<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.filter((attr) => {
                attributes.map((selectedAttr: any) => {
                    if (selectedAttr.label === attr.label) {
                        return (<div className="basis-1/4">
                            <label className="block text-sm font-medium text-gray-700 mb-3"> Color </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>)
                    }
                })
            })
        }

    </div>

Can cany please help me? How can I solve it?

While your approach might actually work, you should do fakeAttributes.filter(...).map(...) — user5734311
– user5734311, Commented Feb 15, 2022 at 9:13
Live code: codesandbox.io/s/dank-fog-1vue7?file=/src/AddProducts/… — Fathe
– Fathe, Commented Feb 15, 2022 at 10:09

jsN00b · Accepted Answer · 2022-02-15 21:03:54Z

This may be one possible solution to achieve rendering the new select dropdown boxes:

Code Sample:

            <div className="basis-2/4">
              <label className="block text-sm font-medium text-gray-700 mb-3">
                {" "}
                Choice{" "}
              </label>
              <Select
                onChange={(e) => setAttributes(e)}
                className="shadow appearance-none border rounded w-full text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                options={addAttributes}
                isMulti
              />
            </div>
            {
              fakeAttributes
              .filter(
                f => attributes
                .map(a => a.label)
                .includes(f.label)
              )
              .map(a => (
                <div>
                  <label>{a.label}</label>
                  <Select
                    options={a.object}
                    onChange={e => console.log('do something with: ' + JSON.stringify(e))}
                  />
                </div>
              ))
            }

Image/ Screenshot of Codesandbox preview:

Collectives™ on Stack Overflow

How can I add dynamic fields based on my selected attributes in react js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related