Search code examples
reactjsstyled-componentsstyled-system

React state issue (a bad setState?) when trying to show a component composed with styled components

Now I am not entirely sure what confluence of things brought this issue to a head, but lets start with my minimal reproduction

What am I trying to do

I want to show a styled element that is composed from various "inherited" members inside of a modal. Once the element is clicked, it will dismiss the modal.

Actual results

For some reason the element triggers it's onClick early, as soon as you click the button that is actually supposed to open the modal. It is only because it's a styled component (I think). If I change the element from a Para to a normal p, it behaves correctly.

I'm wondering, what can cause this? Is it that I nested too much? The error I get is


Warning: Cannot update a component (`App`) while rendering a different component (`Styled(Styled(styled.div))`). To locate the bad setState() call inside `Styled(Styled(styled.div))`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
Solution

  • The issue here is that you're spreading ...rest in your Para styled-component. Remove it from ./Para.js and it should work as expected