Component with Hook and Menu

Photoshop UXP Plugin API
1

Hi everybody could someone please help me find where is the error in this component?

import React, { useState } from 'react';



function ViewOne() {

 let [action, setAction] = React.useState('');

 return (

   <>

     <MenuTrigger>

       <ActionButton>

         Edit

       </ActionButton>

       <Menu onAction={setAction}>

         <Item key="cut">Cut</Item>

         <Item key="copy">Copy</Item>

         <Item key="paste">Paste</Item>

       </Menu>

     </MenuTrigger>

     <p>Action: {action}</p>

   </>

 );

}

export default ViewOne;
2

This post doesn’t make much sense. What’s in other four components? What are you trying to achieve? What’s the current status of your attempt to achieve that goal? Why do you assume there’s an error? If there is one, it would be nice to post it here…

Imagine you get to the car service, bring only a picture of your car and ask why wouldn’t it start…

Asking for help and giving no context is really disrespectful :frowning:

3

I apologize it was not my intention to disrespect I’m new to the environment and I mistakenly thought that the code was enough to explain everything. I’m starting to develop a multitab panel with a component for each tab. Each component realizes a set of functions within a tab. I can view contents in the tabs (see example image 1 - appearing when i select the tab “Lab” ) but the tab that contains the code that I posted does not display anything (see image 2 appearing when i select the tab “Scansione” containing the above code ) When I select this tab (“Scansione”) I expected instead to present a button with three options as in the example from the following adobe site link from which I copied the code MenuTrigger – React Spectrum

WORK
WORK381×935 11 KB

NO_WORK
NO_WORK378×928 5.86 KB
- Thanks in advance for your kind reply

4

UXP does not support React Spectrum for UI. You can use the Spectrum UXP for your UI instead or build your own UI that mimics Spectrum if you choose.

When a panel goes blank, it likely indicates a JavaScript error. You can use the UXP Developer Tool’s debugger to help pinpoint the problem. (After loading the plugin from UDT, you can use ••• > Debug to launch the debug panel)

7

Thank you for your prompt reply, I really appreciate . I’m a bit lost developing this UXP panel but at the end I will succeed !! Thanks again !

8

That’s why I asked what’s the error. While developing a plugin, as Kerri suggested, UXP Developer Tools and its debug mode is your best friend

9

Thanks a lot. I’m using the Develop tool in Debug mode but in the case mentioned above I was not able to benefit from it-
I expect a lot of study in front of me … :-))) :sweat_smile:

10

Did you try adding some breakpoints or at least console.logs in appropriate places?

11

I’m using console.logs but not yet breakpoint. I will start using breakopint aswell as I did many, years ago when I was a good Object Oriente C++ programmer . But it’s been a long time …and besides I’m new to Java, HTML, CSS and so on. So it’s going to be a long way for me, but I’ll make it, hopefully with your kind help from this community too. For now I bought Davide Barranca’s book “UXP Plugin development with React JS” and I consider it very very useful