Skip to content

TableHeaderItem is incorrectly bound to td instead of th #743

@tjtaill

Description

@tjtaill

Prerequisites

Feel free to delete this section if you have checked off all of the following.

  • I've searched open issues to make sure I'm not opening a duplicate issue
  • This issue not specific to spectacle-boilerplate (those issues should be opened here).
  • I have read through the docs before asking a question
  • I am using the latest version of Spectacle

Describe Your Environment

Macbook pro reason hooks project environment

What version of Spectacle are you using? (can be found by running npm list spectacle)

spectacle@5.7.1

What version of React are you using? (can be found by running npm list react)

reason-react@0.7.0
└── react@16.10.2

What browser are you using?
Chrome

What machine are you on?
Macbook Pro

Describe the Problem

Everything works but chrome console spits out an error saying

Warning: validateDOMNesting(...): cannot appear as a child of .
in td (created by Styled(td))
in Styled(td) (created by TableHeaderItem)
in TableHeaderItem (created by Presentation)
in thead (created by TableHeader)
in TableHeader (created by Presentation)
in table (created by Styled(table))
in Styled(table) (created by Table)
in Table (created by Presentation)
in div (created by Styled(div))
in Styled(div) (created by Slide)
in div (created by Styled(div))
in Styled(div) (created by Slide)
in div (created by Styled(div))
in Styled(div) (created by Slide)
in Slide (created by Presentation)
in div (created by VictoryAnimation)
in VictoryAnimation (created by SlideWrapper)
in SlideWrapper (created by TransitionGroup)
in div (created by TransitionGroup)
in TransitionGroup (created by Styled(TransitionGroup))
in Styled(TransitionGroup) (created by Manager)
in div (created by Styled(div))
in Styled(div) (created by Manager)
in Manager (created by Connect(Manager))
in Connect(Manager) (created by Deck)
in Context (created by Controller)
in Controller (created by Deck)
in Provider (created by Deck)
in Deck (created by Presentation)

Expected behavior: [What you expect to happen]

I expect this to use th instead of td and not have my console polluted with that error message

Actual behavior: [What actually happens]

See description

Additional Information

At the following location
https://github.com/FormidableLabs/spectacle/blob/master/src/components/table-header-item.js#L6

this line
const StyledTableHeaderItem = styled.td(props => props.styles);
should be
const StyledTableHeaderItem = styled.th(props => props.styles);

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions