CODEWITHSUNDEEP
reactjsstyled-components
axel wolf
axel wolf

Reputation: 1478

styled-components causing different behaviour

I made this sandbox to show the problem. The thing is, when typing anything into first inputfield, it doesn't work because it is wrapped in a styled component. The second works because it is not wrapped. Why this? Appreciate any explanation.

const Wrapper = styled.div`
  padding: 15px;
`;
return (
  <div>
    <Wrapper>
      <AsyncTypeahead
        ... // <= does not work, because of "Wrapper"
      />
    </Wrapper>
    <AsyncTypeahead
      ... // <= works, because no "Wrapper"
    />
  </div>
)

Upvotes: 0

Views: 90

Answers (1)

Meir
Meir

Reputation: 14375

Move the wrapper definition outside of the class, it should not be called on each render, it actually generates a React component and has to be defined only once.

Here is an updated and working version of your sandbox.

Upvotes: 1

Related Questions