Chux Rincon Chux Rincon - 3 months ago 15
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
</Td>


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
</Td>


Thanks in advance

Answer

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">
 <div>
  <IconTrashButton />
  <IconPencilButton />
 </div>
</Td>

I hope this help someone else.

Thanks in advance.

Comments