Why sp-picker does not respond on change?

Photoshop UXP Plugin API
6

You can check starter plugin how state is used there for each color. In your case it probably would be something like:

import { useState } from "react";
import {wrapWc} from "wc-react";
import data from "../components/data.json"

const Home = () => {
    const SpPicker = wrapWc("sp-picker")

    const [office, setOffice] = useState({});

    return(
        <>
            <div className="toolName">Home</div>
            <div className="board">

                <sp-label>Office:</sp-label>
                <SpPicker size="m" placeholder="Select office"  onChange={(evt) => setOffice(data[evt.target.value])}>
                    <sp-menu>
                        { 
                            data.map((e,index) => {
                                return(
                                    <sp-menu-item key={index} size="m" value={index}>{e.office}</sp-menu-item>
                                )
                            })
                        }
                    </sp-menu>
                </SpPicker>
                <sp-label>Responsable:</sp-label>
                <sp-textfield size="m" value={office.responsable || ""}></sp-textfield>
                <sp-label>Seats:</sp-label>
                <sp-textfield size="m" value={office.seats || ""}></sp-textfield>
             </div>
        </>
    )
}

export default Home;

Keep in mind, that I didn’t test this and wrote directly here in the forum reply box :sweat_smile: So it might be wrong in some syntax or something, but the basic idea should be clear

1 Like