Passing props to a wrapped component

[darrylcousins]

Hi,

I have a wrapper component that presents a form in a modal, The wrapped form component is necessarily asynchronous because form fields are populated via asynchronous calls. But I'm having problems passing props down to the wrapped component.

How can I get the wrapped component to refresh with new props?

Thanks in advance.

A simplified equivalent version looks like this:

function Wrapper(Component) {
  return function* (props) {
    while (true)
      yield <Component {...props} />;
  };
};

async function* Wrapped({count}) {
  for await (const _ of this) {
    console.log('counting in Wrapped Component', props.count); // does not refresh
    yield <div>My count is {count}</div>;
  };
};

const MyComponent = Wrapper(Wrapped);

function* App() {
  let seconds = 0;
  const interval = setInterval(() => {
    seconds++;
    this.refresh();
  }, 1000);

  try {count
    while (true) {
      console.log('counting in App', seconds); // counts
      yield (
        <MyComponent count={seconds} />
      );
    }
  } finally {
    clearInterval(interval);
  }
};

Ngā mihi, Darryl.

[brainkim]

It looks like both in the reproduction and in your actual code, you’re not updating the props to latest in either the wrapper or wrapped function.

function wrap(Component) {
  return function *(props) {
    for (props of this)
      yield <Component {...props} />;
  };
}

async function *Wrapped({count}) {
  for await ({count} of this) {
    console.log('counting in Wrapped Component', count); // does not refresh
    yield <div>My count is {count}</div>;
  };
}

const MyComponent = wrap(Wrapped);

function *App() {
  let seconds = 0;
  const interval = setInterval(() => {
    seconds++;
    this.refresh();
  }, 1000);

  try {
    for ({} of this) {
      console.log('counting in App', seconds); // counts
      yield (
        <MyComponent count={seconds} />
      );
    }
  } finally {
    clearInterval(interval);
  }
}

Anywhere you’re using while (true) you should make sure that you’re not actually letting props get stale between updates, and change the code accordingly. For example, on this line https://github.com/darrylcousins/brunch-streamside/blob/e49d2b51aaf78eeea54a065865bf061838108e0a/app/form/form-modal.js#L274 you need to probably make that for (props of this)

We might want a linter rule at some point to warn users about this. I can imagine it can be very confusing!

Kia ora!
Brian

[darrylcousins]

Ngā mihi nui Brian.

Thanks a million. That solved my problem.

Sincere regards,
Darryl

[brainkim]

Anytime!