Chux Rincon Chux Rincon - 1 year ago 136
HTML Question

render two or more icons inside column of reactable in reactjs

I'm trying to add two or more icons inside a reactable column.

<Td column="conf" className="col-md-1">
<span className="fa fa-trash"></span>
<span className="fa fa-pencil"></span> // only work with one

if i try to render with only one icon this work fine, but when i try to render more than one icon the rendered input is [object Object],[object Object] and not the icons spected.

How can i fix it?

some ideas?

I try creating a specific component with only the icon and still not working for more than one icon.

<Td column="conf" className="col-md-1">
<IconTrashButton />
<IconPencilButton /> //Only work with one component

Thanks in advance

Answer Source

I find how to solve this issue basen on the comments.

The <Td> element only render one this.props.children. So when he have more than one children, the render fail. and the output is some like [object Object],[object Object].

So, the final code look like this

<Td column="conf" className="col-md-1">
  <IconTrashButton />
  <IconPencilButton />

I hope this help someone else.

Thanks in advance.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download