# Pass prop to photoshop function

**URL:** <https://forums.creativeclouddeveloper.com/t/pass-prop-to-photoshop-function/4976>\
**Category:** UXP Plugin API\
**Tags:** react, typescript\
**Created:** [July 20, 2022, 10:40am UTC](https://forums.creativeclouddeveloper.com/t/pass-prop-to-photoshop-function/4976 "2022-07-20T10:40:26Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![mateszkom](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/mateszkom/32/1580_2.png) [@mateszkom](https://forums.creativeclouddeveloper.com/u/mateszkom)\
**Post date:** [July 20, 2022, 10:40am UTC](https://forums.creativeclouddeveloper.com/t/pass-prop-to-photoshop-function/4976/1 "2022-07-20T10:40:26Z")

</div>

I am trying to pass the props to ‘createLater’ function but I am getting error →

```auto
Type '{ layerName: any; }' is not assignable to type 'string'.ts(2322)
index.d.ts(1020, 5): The expected type comes from property 'name' which is declared here on type 'Partial<Layer>'
(property) name?: string

```

Solution is probably trivial but I can’t figure it out.

**TestComponent.tsx**

```auto
export default function TestComponent({ layerName }) { 
  const handleClick = async () => {
    try {
      await core.executeAsModal(
        async () => {
          await app.activeDocument.createLayer({ name: { layerName } }); //NOT WORKING HERE
        },
        { commandName: 'Adding new layer with a name I had choosed' }
      );
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <Spectrum.Button variant="secondary" onClick={handleClick}>
      Make layer {layerName} //WORKING HERE
    </Spectrum.Button>
  );
}

TestComponent.propTypes = {
  layerName: PropTypes.string,
};

```

---

<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:** [July 20, 2022, 12:14pm UTC](https://forums.creativeclouddeveloper.com/t/pass-prop-to-photoshop-function/4976/2 "2022-07-20T12:14:03Z")

</div>

This is a TypeScript error. Your `layerName` that `TestComponent` accepts does not have a type defined. I don’t see you using TS yourself, so maybe worth removing it over all? Or maybe:

```auto
export default function TestComponent({ layerName }: { layerName: string }) { 

```

But I assume, if you already asked the question, you’re not really familiar with TypeScript, so I’d go with the first option by removing TS support.

P. S. Are you using React Spectrum? Does it even work in UXP? 🧐

---

<div class="post-metadata">

**Author:** ![mateszkom](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/mateszkom/32/1580_2.png) [@mateszkom](https://forums.creativeclouddeveloper.com/u/mateszkom)\
**Post date:** [July 20, 2022, 1:03pm UTC](https://forums.creativeclouddeveloper.com/t/pass-prop-to-photoshop-function/4976/3 "2022-07-20T13:03:47Z")

</div>

Okay, now `Type '{ layerName: string; }' is not assignable to type 'string'`.  
When I do that ` createLayer({ name: layerName })` i can use only initial _layerName_ value  
.

and yes, I am not really familliar with TS, also react is new to me. I try to stick with TS, for practice.

Regarding Spectrum I’m not using unsupported [@adobe/react-spectrum](https://www.npmjs.com/package/@adobe/react-spectrum) but @thejustinwalsh’s [React-uxp-spectrum](https://www.npmjs.com/package/react-uxp-spectrum)

---

<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:** [July 20, 2022, 1:46pm UTC](https://forums.creativeclouddeveloper.com/t/pass-prop-to-photoshop-function/4976/4 "2022-07-20T13:46:00Z")

</div>

> [@mateszkom](#):
>
> Okay, now `Type '{ layerName: string; }' is not assignable to type 'string'`.

Could you paste exact string from your code where you define `TestComponent`? And the part where you include that component - like `<TestComponent layerName={someName} />`. What would be `someName` there?

---

<div class="post-metadata">

**Author:** ![mateszkom](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/mateszkom/32/1580_2.png) [@mateszkom](https://forums.creativeclouddeveloper.com/u/mateszkom)\
**Post date:** [July 26, 2022, 8:23am UTC](https://forums.creativeclouddeveloper.com/t/pass-prop-to-photoshop-function/4976/5 "2022-07-26T08:23:15Z")

</div>

It turns out that it’s not any related to photoshop  
I made [codesandbox](https://codesandbox.io/s/react-passed-state-is-not-changing-in-other-component-hwf49o) with similar code but simplified.

---

<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:** [July 26, 2022, 8:45am UTC](https://forums.creativeclouddeveloper.com/t/pass-prop-to-photoshop-function/4976/6 "2022-07-26T08:45:40Z")

</div>

Your error is from TypeScript, but your shared code is pure JS and doesn’t have any errors

---

<div class="post-metadata">

**Author:** ![mateszkom](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/mateszkom/32/1580_2.png) [@mateszkom](https://forums.creativeclouddeveloper.com/u/mateszkom)\
**Post date:** [July 27, 2022, 8:29am UTC](https://forums.creativeclouddeveloper.com/t/pass-prop-to-photoshop-function/4976/7 "2022-07-27T08:29:28Z")

</div>

I changed Spectrum.Button to default sp-button and everything is working  
Don’t know why tho