Styled Component rendering triggers Element type error

Viewed 999

I just installed the styled-components library and started playing with it.

However this simple example:

import React from 'react'
import styled from 'styled-components'

const Div = styled.div`background: red;`

const AlertCard = () => (
  <Div>Hello World</Div>
)
export default AlertCard

And the render function:

render() {
  const { fetchingAlerts, alerts } = this.props

  return (
    fetchingAlerts ? 
      <Loader /> :
      <div>
        <AlertFormContainer />
        <div>
          {alerts.length === 0 ?
            <EmptyAlerts /> :
            <div>
              {alerts.map(alert => (
                <AlertCard text="My text " />
              ))}
            </div>
          }
        </div>
      </div>
    )
  )
}

triggers this error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

The styled component returns an object of $$typeof: Symbol(react.element)

I don't know what goes wrong

1 Answers
Related