João Bezerra Posts - Answer Overflow

João Bezerra

Explore posts from servers

•Created by João Bezerra on 7/27/2024 in #support

How to wrap a store without losing reactivity

Given a store like this:

const [store setStore] = createStore({
  users: [
    { firstName: 'William', lastName: 'Shakespeare' },
    { firstName: 'Charles', lastName: 'Darwin' }
  ]
})

const [store setStore] = createStore({
  users: [
    { firstName: 'William', lastName: 'Shakespeare' },
    { firstName: 'Charles', lastName: 'Darwin' }
  ]
})

How can I do the following without losing reactivity?

const userWrapper = {
  ...store[0],
  get fullName() {
    return store[0].firstName + store[0].lastName;
  }
}

const userWrapper = {
  ...store[0],
  get fullName() {
    return store[0].firstName + store[0].lastName;
  }
}

13 replies

SSolidJS

•Created by João Bezerra on 5/8/2024 in #support

Should I disable `solid/reactivity` linter warning in this case?

I frequently run into this warning with event handlers. Here's an example:

type PropsType = {
  something: string;
}

const SomeComponent = (props: PropsType) => {
  // eslint-plugin-solid complains with the following
  // warning:
  //
  // This function should be passed to a tracked scope
  // (like createEffect) or an event handler because it
  // contains reactivity, or else changes will be
  // ignored  solid/reactivity
  const handleInput = (value: string) => {
    print(props.something, value);
  }

  return (
    <input onClick={(event) => handleInput(event.currentTarget.value)} />
  );
}

type PropsType = {
  something: string;
}

const SomeComponent = (props: PropsType) => {
  // eslint-plugin-solid complains with the following
  // warning:
  //
  // This function should be passed to a tracked scope
  // (like createEffect) or an event handler because it
  // contains reactivity, or else changes will be
  // ignored  solid/reactivity
  const handleInput = (value: string) => {
    print(props.something, value);
  }

  return (
    <input onClick={(event) => handleInput(event.currentTarget.value)} />
  );
}

Is there a problem with this code? If so, what's wrong with it? Otherwise, should I disable this warning in situations like this one?

16 replies

SSolidJS

•Created by João Bezerra on 5/2/2024 in #support

Is it ok to use a global store to persist component state between mounts?

Sometimes I want to be able to keep some component state between mounts. Partially filled form state is a good example. Is it ok to use a global store for this? Is there a better way?

20 replies

Gaming

Programming