Need a little help with Svelte components and props

1

This project is in Svelte and I don’t know if there is a lot of people here knows a lot about it. I don’t expect a lot of answers and response, but just in case.

So, I have a little project I am doing for 100 Days of Coding, and I start to notice that the more days I progress, the more of the same thing I have to write, just with 1 difference. Here’s an example from my code.

<Tasks {...projects.Day1} />
<Tasks {...projects.Day2} />
<Tasks {...projects.Day3} />

I want to go all the way to 100, but it’s gonna require me to type the same thing 100 times, with one small difference. I tried using an each loop like this:

{#each dataLength as _, i}
      <Tasks {...projects.Day{ i }/>
{/each}

But Svelte doesn’t accept this. So I have no way of passing in props from different object keys. Is there a way to do this, or is there an alternative? Here’s my full Svelte App https://github.com/JoshuaPelealu/100DaysOfCode/tree/master/src

2

Is there a reason why you don’t use an array of objects instead of an object of objects?

const days = Object.values(projects);

{#each days as day}
  <Tasks {...day} />
{/each}
1 Like
3

Hey @lasjorg,

Thank you for trying to help, but I purposely didn’t use array of objects, because I don’t think it will be able to take it as a spread prop, because it contains other props needed, so an object would be the way to go.

But I found the solution to doing this, I should’ve used the bracket notation to access the object instead of dot notation (now I feel dumb). Then I just pass in the object day using the template literal, like this:

{#each dataLength as _, i}
<!-- I used _ because it's value is the full Day1, Day2 and so on -->
      <Tasks {...projects[`${ _ }]`/>
{/each}

and it totally worked. Thanks for trying to help me though :slight_smile:

4

You can use an array of objects and it would work better for how you are using it. All you want is to pass all the properties of each object as props to the component.

// array of objects
import { projects } from "./taskData";

{#each projects as project}
  <Tasks {...project} />
{/each}

But if you do want an object of objects, why not use Object.values? That will give you an array of objects you can loop and spread to the component as props. The code will, in my opinion, be more clear and declarative. You do not need to bracket into the object, you are kind of turning the each loop into a for...in loop when you don’t need to.

// object of objects
import { projects } from "./taskData";

// array of objects
const days = Object.values(projects)

{#each days as day}
  <Tasks {...day} />
{/each}

On the subject of data structures. For the list array, I don’t see the value of having the objects, it just makes getting to the strings more cumbersome. All you need is an array of strings. Using the same identifier for the array name and property is also a bit confusing.

list: [
  { list: 'Made this site style into cards' },
  { list: 'Simplified site design' },
  { list: 'Made cards clickable' },
  { list: 'When cards clicked, more details appear' },
]

list[index].list

list: ['Made this site style into cards', 'Simplified site design', 'Made cards clickable', 'When cards clicked, more details appear']

list[index]

Hopefully, you will read this as constructive feedback and not just me telling you how you should write your code.

2 Likes
5

Thanks for the feedback, I would definitely try to do that. Sometimes I just want to make my code short but still understandable for the people looking at it.