0

I have a Button component that uses the types from ButtonTypes.ts

<script lang="ts">
   import type { ButtonTypes } from './file_path' # importing button type
   export let buttonProps:ButtonTypes 
</script>

<button type="{buttonProps.type}" class="{buttonProps.customClasses}">Click</button>

In the Slider component (that uses types from sliderTypes.ts), I am using the above Button component

<script lang="ts">
    import Buttons from './file_path';
    import sliderTypes from './ file_path';
    export let sliderProps:sliderTypes          # types from sliderTypes
    export let button_props;                    # exporting button_props so that slider can be called in other files and pass props values to customize the buttons for each instance of the slider called
</script>

<div>
  <img src="{sliderProps.image}" alt="sliderProps.alt"/>
  <h1>{sliderProps.heading}</h1>
  <Button buttonProps = {...button_props}/> # This throws an error- properties are missing from type ButtonTypes
</div>

Finally, I want both Slider and Button components to be used in App.svelte(root file). I have tried the following in the App.svelte. But it does not work

<script lang="ts">
   import Slider from "./file_path";
</script>

<Slider 
   sliderProps = {{
     src="www.image_link.com",
     alt="picture_name"
}} 
  button_props = {{
   type="submit",
   class="customclass"
}}
/>

The slider component with SliderProps is rendered but the *button is not rendered.

What can be done?

3
  • Are there runtime errors or does it not render because the code is not emitted due to type errors? If there are runtime errors, you should add them to question.
    – H.B.
    Aug 4, 2022 at 15:41
  • @H.B There are no run-time errors. Just that its not rendering. But when I enter the prop values for the button in the slider component, the button is getting rendered. However, when I pass the props for the button in the App.svelte, it is not being rendered
    – jeff
    Aug 4, 2022 at 15:55
  • You should take more care with your code, there are so many small mistakes in it. E.g. = in the object literals instead of :, import Buttons instead of import Button, missing {...} on attributes. Makes it harder to tell what the real issue is supposed to be.
    – H.B.
    Aug 4, 2022 at 16:13

1 Answer 1

1

This is wrong:

<Button buttonProps={...button_props} />

If a named property is assigned, there should not be a spread:

<Button buttonProps={button_props} />

Spreading is for assigning many individual properties where the keys on the spread object correspond to the properties. E.g.

<script>
  // ...
  const stuff = { a: 1, b: 2 }; // Name of object does not matter
</script>

<Button {...stuff} />
<!-- Button -->
<script>
  export let a;
  export let b;
</script>
1
  • Thank you for pointing out the silly mistakes. I should be careful
    – jeff
    Aug 4, 2022 at 16:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.