Unable to pass react component as attribute to another component

Question

I am trying to set a React component as an attribute to another react component like this (I'm using material ui):

<Tabs>
   <Tab icon={<ActionFlightTakeoff />} />
</Tabs>

But in the browser inspect shows me this:

<div icon="[object Object]" tabindex="1" style="did-flip:true;display:table-cell;cursor:pointer;text-align:center;vertical-align:middle;height:48px;color:rgba(255,255,255,0.6);outline:none;font-size:14px;font-weight:500;white-space:initial;font-family:Roboto, sans-serif;box-sizing:border-box;width:33.333333333333336%;" data-reactid=".0.1.0.$1/=11"></div>

Basically, the react component is getting generated as [object Object] , without the icons being generated
What could I be doing wrong?

Here is the complete file:

import React, { Component, PropTypes } from 'react';
import Tabs from 'material-ui/lib/tabs/tabs';
import Tab from 'material-ui/lib/tabs/tab';
import FontIcon from 'material-ui/lib/font-icon';
import ActionFlightTakeoff from 'material-ui/lib/svg-icons/action/flight-takeoff';

export default React.createClass({

  styles: {
    paper: {
      height: 100,
      margin: 10,
      padding: 10,
      textAlign: 'center'
    }
  },

  render: function() {
    return (

            <Tabs>
              <Tab icon={<FontIcon className="muidocs-icon-action-home" />} />
              <Tab icon={<ActionFlightTakeoff />} />
              <Tab icon={<FontIcon className="material-icons">favorite</FontIcon>} />
            </Tabs>
    );
  }

});

Answer 1

I've tried your code and for me works fine. I'm using React version 15.0.2.

I'm not sure, but I think the way you are trying it, it's the right one. You want to put the Component inside the "icon" prop.

I've looked for it in the docs, and it's waiting for a FontIcon or a SvgIcon. Thus, the problem is not the Prop.

Material UI Tab's