#1055·radium

Formik props and Radium interactive style unique key

Author: douglasrcjamesCreated Jan 29, 2021Updated Feb 3, 2021

I am using Formik for my React app and I am trying to use this library for a CSS-in-JS solution that offers easy hover effects and more. I have found that my button within a {(props)=> (...)} wrapper, which is used by Formik, will cause this error to trigger: Radium requires each element with interactive styles to have a unique key, set using either the ref or key prop. Key "submit" is a duplicate. . Simply commenting out that props wrapper will cause the error to go away, but I need it for Formik props! No matter what you make the key, the error will still trigger.

Codesandbox example: https://codesandbox.io/s/formik-radium-hover-working-vhz5i?file=/src/Register.js:1232-1361

Any ideas for a workaround? Is this a Formik issue?