React JS Dropdown, Array Properties to Text fields

Photoshop
1

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.

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;
2

I would change the array:

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

Hooks:

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

Then in output:

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:

    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)

3

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

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;
4

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

    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

5

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