forwardRef not passing props in Frontity

🙋Get Help
1

Hi, I just noticed that if I try to use forwardRef to pass props and a ref to a component, in the props are not present the frontity props (state, actions, etc).
Here the forwardRef doc:

Something I could do?
Thank you.

3

Hi @stefano.mercadante,

Forwarding Refs should work in Frontity just as any other React feature.

Can you please provide a repo or code-sandbox with your code? This is especially helpful to find solutions of technical issues with specific code

Here you have a Frontity demo project using refs with Frontity

Hope this helps

7

Hi again, @stefano.mercadante

After checking this with the Development Team, (thanks @mmczaplinski for the feedback) I realized that indeed forwardRef components do not work with connect() at the moment!

Our state manager is based on react-easy-state so take a look at this issue: https://github.com/RisingStack/react-easy-state/issues/187

If you have a component that is created with forwardRef(), you cannot wrap it with connect() unfortunately:

// Not gonna work :(
const EmailInput = React.forwardRef((props, ref) => (
  <div>
    api: {JSON.stringify(props.state.source.api, null, 2)}
    <input ref={ref} {...props} type="email" />
  </div>
));

const EmailInputConnected = connect(EmailInput);

It seems the maintainers of react-easy-state agrees with the idea of providing support to forwardRef to connected components and that they want to include this change in the next big version of the product (v7)

1 Like
9

Good to know!
Thank you very much :slight_smile: