# React JS Dropdown, Array Properties to Text fields

**URL:** <https://forums.creativeclouddeveloper.com/t/react-js-dropdown-array-properties-to-text-fields/4147>\
**Category:** Photoshop\
**Created:** [January 14, 2022, 6:47am UTC](https://forums.creativeclouddeveloper.com/t/react-js-dropdown-array-properties-to-text-fields/4147 "2022-01-14T06:47:22Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![matakus](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@matakus](https://forums.creativeclouddeveloper.com/u/matakus)\
**Post date:** [January 14, 2022, 6:47am UTC](https://forums.creativeclouddeveloper.com/t/react-js-dropdown-array-properties-to-text-fields/4147/1 "2022-01-14T06:47:22Z")

</div>

Trying to learn React but I’m not understanding how to pass an Array’s properties through a Map so that the function can get a specific property.

Basically i’m trying to make a dropdown the user selects, and then the dropdown passes 2 or more properties in the textfields.

in this case, when TIFF is selected, testfield1 should = filetype, textfield2 = bitdepth

I can get the event’s value, but not sure how to access the arrays properties outside of the map. Not sure if the below code is totally the wrong way to go about this.

Any help would be greatly appreciated.

```auto
import React, { useState } from "react";

const SaveOptions = () => {

    //Default Options HOOKS

    const [filetype, setFileType] = useState("TIFF");
    const [bitdepth, setBitdepthValue] = useState("16");

    //ARRAY

    const filetypeOptionsArray = [
        { name: "TIFF", extension: "TIFF", bitdepth: "16" },
        { name: "PSD", extension: "PSD", bitdepth: "16" },
        { name: "JPG", extension: "JPG", bitdepth: "8" },
    ]

    // Handlers

    const handleFiletypeChange = (e) => {

        setFileType(e.target.value);
        setBitdepthValue(e.target.value); // <-- don't know how to get the array properties

    };

    return (

        <div style={{ border: "1px solid #555", padding: "5px", borderRadius: "5px" }}>

            <div className="row" >
                <sp-picker size="s" style={{ flexGrow: 1 }}>
                    <sp-menu slot="options" onClick={handleFiletypeChange}>
                        {
                            filetypeOptionsArray.map((e) => {
                                return <sp-menu-item selected={filetype === e.name ? true : null} key={e.name} value={e.name}>{e.name}</sp-menu-item>
                            })
                        }
                    </sp-menu>
                </sp-picker>

            </div>

            <sp-textfield value={filetype}></sp-textfield>
            <sp-textfield value={bitdepth}></sp-textfield>

        </div>
    );
}

export default SaveOptions;

```

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [January 14, 2022, 7:40am UTC](https://forums.creativeclouddeveloper.com/t/react-js-dropdown-array-properties-to-text-fields/4147/2 "2022-01-14T07:40:40Z")

</div>

I would change the array:

```auto
    const filetypeOptionsArray = [
        { "tiff": { type: "tiff", extension: "TIFF", bitdepth: "16" } },
        { "psd": { type: "psd", extension: "PSD", bitdepth: "16" } },
        { "jpg": { type: "jpg", extension: "JPG", bitdepth: "8" } },
    ]

```

Hooks:

```auto
const [value, setValue] = useState(filetypeOptionsArray.tiff);

```

Then in output:

```auto
Object.entries(filetypeOptionsArray).map(([name, data]) => <sp-menu-item selected={value.type === data.type ? true : null} key={name} value={name}>{data.extension}</sp-menu-item>)

// ...

            <sp-textfield value={value.extension}></sp-textfield>
            <sp-textfield value={value.bitdepth}></sp-textfield>

```

Then:

```auto
    const handleFiletypeChange = (e) => {
        setValue(filetypeOptionsArray[e.target.value])
    };

```

Of course there’s room to improve (by adding some checks or changing `map()` with `for(... of ...)` and probably variables names)

---

<div class="post-metadata">

**Author:** ![matakus](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@matakus](https://forums.creativeclouddeveloper.com/u/matakus)\
**Post date:** [January 14, 2022, 10:24am UTC](https://forums.creativeclouddeveloper.com/t/react-js-dropdown-array-properties-to-text-fields/4147/3 "2022-01-14T10:24:27Z")

</div>

Yeah great thank you, although I’m getting the below error now in debug

TypeError: Cannot read property ‘type’ of undefined

Sorry if this is true basic stuff but I struggle make sense learning new code until I can see a working example and then it all clicks

```auto
import React, { useState } from "react";

const SaveOptions = () => {

    //ARRAY

    const filetypeOptionsArray = [

        { "tiff": { type: "tiff", extension: "TIFF", bitdepth: "16" } },

        { "psd": { type: "psd", extension: "PSD", bitdepth: "16" } },

        { "jpg": { type: "jpg", extension: "JPG", bitdepth: "8" } },

    ]

    //Default Options HOOKS

    const [value, setValue] = useState(filetypeOptionsArray.tiff);

    // Handlers

    const handleFiletypeChange = (e) => {

        setValue(filetypeOptionsArray[e.target.value])

    };

    return (

        <div style={{ border: "1px solid #555", padding: "5px", borderRadius: "5px" }}>

            <div className="row" >

                <sp-picker size="s" style={{ flexGrow: 1 }}>

                    <sp-menu slot="options" onClick={handleFiletypeChange}>

                        {

                          Object.entries(filetypeOptionsArray).map(([name, data]) => <sp-menu-item selected={value.type === data.type ? true : null} key={name} value={name}>{data.extension}</sp-menu-item>)

                        }

                    </sp-menu>

                </sp-picker>

            </div>

            <sp-textfield value={value.extension}></sp-textfield>

            <sp-textfield value={value.bitdepth}></sp-textfield>

        </div>

    );

}

export default SaveOptions;

```

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [January 14, 2022, 10:32am UTC](https://forums.creativeclouddeveloper.com/t/react-js-dropdown-array-properties-to-text-fields/4147/4 "2022-01-14T10:32:57Z")

</div>

Ah sorry, not at PC now so can’t test. It should probably be an object:

```auto
    const filetypeOptionsArray = {
        "tiff": { type: "tiff", extension: "TIFF", bitdepth: "16" },
        "psd": { type: "psd", extension: "PSD", bitdepth: "16" },
        "jpg": { type: "jpg", extension: "JPG", bitdepth: "8" },
    }

```

My bad. If there are errors, always check which line produces it and most of the time it’s quite easy to figure out

---

<div class="post-metadata">

**Author:** ![matakus](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@matakus](https://forums.creativeclouddeveloper.com/u/matakus)\
**Post date:** [January 14, 2022, 8:06pm UTC](https://forums.creativeclouddeveloper.com/t/react-js-dropdown-array-properties-to-text-fields/4147/5 "2022-01-14T20:06:58Z")

</div>

Amazing, this example has helped me so much, thank you