tame elk
I'm trying to add a key to a Fragment like in React:
https://reactjs.org/docs/fragments.html#keyed-fragments
This does not work:
{todos.length && todos.map((todo) => <Fragment key={todo.id}><Todo {...todo} /></Fragment>)}
And components don't have a key input without explicitly declaring it. Is there a way to add the key to a custom component without adding a <div> ?
J
raw raft
I'm a little confused by your example. Why can't you just add the key to the Todo? In any case, I don't think fragments can have attributes in Qwik so this use case isn't really supported. At least, not at the moment.
tame elk
I ended up adding it to the todo (then in the interface), then not using it in my Todo component. Just trying to simplify things as much as possible. Probably should make a feature request.
raw raft
I think the key attribute is a property on all Qwik components, so you don't have to manually add it to the todo props. Unless I'm misunderstanding.
Feature requests are always welcome.
tame elk
It would only let me add it if I declared the type first, which I didn't use in the child... so not a big deal, just should be built-in to the types somehow maybe:
...
{todos.length
? todos.map((todo) => <Todo key={todo.id} {...{ todo }} />)
: <p><b>Add your first todo item!</b></p>
}
<TodoForm uid={user.uid} />
</>
);
});
// each todo item
export const Todo = ({ todo }: { todo: TodoItem, key: string }) => {
...
I was pretty sure it was. That's weird.
raw raft
Hmm. It works for me without any errors.
acoustic trellis
@tame elk FYI: there is an open issue on github for keyed fragments https://github.com/BuilderIO/qwik/issues/2565
tame elk
Hmm. It works for me without any errors.
Yeah, you're using a component, I'm using a "lite-component / function"