A react-intl <FormattedMessage> within a <Td> component always renders to [Object Object]

[florianBonavendi]

Im am trying to use reactable to output rows with i18n content with the help of https://github.com/yahoo/react-intl, specifically with the FormattedMessage component that renders a <span>tag with the i18n message for a given message key.

It works flawlessly everywhere with the exception of the reactable Td compontent. Each FormattedMessage is rendered as [Object Object] in the browser's DOM in this case.

Simplified example:

<Table noDataText={(<FormattedMessage id="test")}>   <!-- works -->
  <Thead>
    <Th column="outOfDate">
      <FormattedMessage id="test" />   <!-- works -->
    </Th>
  </Thead>
  <Tr>
    <Td>
      <FormattedMessage id="test" />   <!-- doesn't work - [Object Object] -->
    </Td> 
  </Tr>
</Table>

Output: The i18n message is correctly replaced in the noDataText property of the Table and in the Th, but yields [Object Object] in the Td. As I am always using the same FormattedMessage component with the same message key, I am quite sure it has nothing to do with the FormattedMessage compontent as such.

Any idea for why this is the case and how I to prevent this?

[amelon]

+1
the same for me

[mehmeta]

Have you tried adding the column property to the Tds? I think they're required.

[revett]

Seeing this as well w/ two children within a single <Td> component.

Children are an <input> and <label>.

[florianBonavendi]

@mehmeta: Thanks for the hint, bit the Issue persists when adding a column property.

Anybody has a fix at hand? It makes the project rather hard to use in a real-world project this way :(

[florianBonavendi]

Found the trivial workaround: in case you have two or more child components below the <Td> component, wrap them in a <div>.