How to use 'as' props (elementType) in react-bootstrap Components?

Question

In react-bootstrap documentation, there is 'as' props in API of every component with Type elementType. I can't figure out how to use it in component. I tried passing in React components and "<div>test</div>" as "as" props but didn't work. I tried to search for any example or implementation but could not find any. Thanks.

Answer 1

You are passing component type that will be instantiated with JSX. Internally it looks something alike

function Button(props) {
 const ComponentType = as;
 .......
  <ComponentType ......>

So as you know it will work if it's a string with tagname of native element("div", "table" etc) or valid React component(class inherited React.Component or function for functional component)

Answer 2

I needed this to customize the tab of a nav component

     <Nav className='tabs-div' variant='tabs' >
        <Nav.Item  >
          <Nav.Link className='pending'  eventKey={-1}>Pending</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link className='positive' eventKey={1}>Positive</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link className='negative' eventKey={0}>Negative</Nav.Link>
        </Nav.Item>
      </Nav>

you can understand from the code that the tab will be as normal. but I needed another costumization with notification on the tab icons ....

so I created a component like this

import React from 'react'

class BtnPending extends React.Component{


    render(){
        return(
            <button className='btn btn-warning' >Pending</button> // this is just for the sake of demo
        )
    }
}


export default BtnPending;

Nav.Link will be changed to this

<Nav.Link as={()=>{return(<BtnPending/>)}} eventKey={-1}>Pending</Nav.Link>

for Tab in react-bootstrap you can also use the argument title