What is the purpose of componentClass prop in reactbootstrap

Question

I read react-bootstrap button doc and there is componentClass prop that I can't understand. They explain it like "You can use a custom element type for this component".

What is the purpose of this prop? Any examples will be appreciated.

Answer 1

Doc is right here. Basically when you create a Button component it will be rendered as button html element by default. In case when you want to have it wrapped inside "custom component", for example <span> you can use componentClass property to handle that for you.

Example:

  var Button = React.createClass({

    render() {
      return <h1 ref='button_node'>
      <ReactBootstrap.Button bsStyle="success">Button</ReactBootstrap.Button>
      </h1>;
    }
  });  

  var CustomButton = React.createClass({

    render() {
      return <h1 ref='button_node'>
      <ReactBootstrap.Button componentClass="span" bsStyle="danger">Custom one</ReactBootstrap.Button>
      </h1>;
    }
  });  

  ReactDOM.render(<Button/>, document.getElementById('button')); 
  ReactDOM.render(<CustomButton/>, document.getElementById('custom-button')); 

In this case Button will be rendered as default button element and CustomButton in span.