"[object Object]" appearing in tooltip when hovering column header

[Baloche]

Hello, I think I'm facing an issue : when I put a React element in the label prop of a column, the tooltip "[object Object]" appears when I the cursor is hovering the column header :

<Table /* ... props */>
    <Column
      label={<LocalizedText id="WEB_LAST_MEASUREMENT" />}
      /* ... other props */
    />
</Table>

After inspecting the node, I can see that the span element in the header has its prop title containing the react element I declared as the label :

{
  children: {…},
  className: "ReactVirtualized__Table__headerTruncatedText",
  title: {,
    $$typeof: Symbol(react.element),
    _owner: FiberNode{…},
    _store: {…},
    key: null,
    props: {…},
    ref: null,
    type: LocalizedText()
  }
}

I think I can fix that by giving the Column a custom headerRenderer prop, but I don't think that's the expected behaviour. Or am I doing something wrong ?

[ingvardm]

[EDIT] are you doing something like: const page = { title: 'some title' } ... <Page {...page}/> ...

Cos if you do: you are passing title attribute which is responsible for the tooltip content

[BykovDenis]

You can try like this

ReactDOMServer.renderToString(<LocalizedText id="WEB_LAST_MEASUREMENT" />)