Reactstrap changing active NavLink onClick

Question

Is there a direct way to change which tab is active? This example has 'Link 1' as active by default.

const Navi = () => {


  const startChangeVis = id => {
    // do something in here to make clicked NavLink active 
  }

  return(
  <div>
      <Nav tabs>
        <NavItem>
          <NavLink id="a" href="#" onClick={() => { startChangeVis('a')}} active>Link 1</NavLink>
        </NavItem>
        <NavItem>
          <NavLink id="b" href="#"  onClick={() => { startChangeVis('b')}} >Link 2</NavLink>
        </NavItem>
        <NavItem>
          <NavLink id="c" href="#"  onClick={() => { startChangeVis('c')}} >Link 3</NavLink>
        </NavItem>
      </Nav>
  </div>
  )
}

On The ReactStrap Git page it says the following:

NavItem.propTypes = {
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  active: PropTypes.bool,
  // pass in custom element to use
}

It Renders HTML as follows:

<a id="a" href="#" class="nav-link active">Link 1</a>

Answer 1

SOLUTION:

const Navi = () => {
  const [acn1,setAcn1] = useState('active') // assumes link 1 is default active
  const [acn2,setAcn2] = useState('')
  const [acn3,setAcn3] = useState('')

  const startChangeVis = id => {
    setAcn1('')
    setAcn2('')
    setAcn3('')
    if(id === 'a')      setAcn1('active')
    else if(id === 'b') setAcn2('active')
    else if(id === 'c') setAcn3('active')
  }

  return(
  <div>
      <Nav tabs>
        <NavItem>
          <NavLink id="a" href="#" onClick={() => { startChangeVis('a')}} className={acn1}>Link 1</NavLink>
        </NavItem>
        <NavItem>
          <NavLink id="b" href="#"  onClick={() => { startChangeVis('b')}} className={acn2}>Link 2</NavLink>
        </NavItem>
        <NavItem>
          <NavLink id="c" href="#"  onClick={() => { startChangeVis('c')}} className={acn3}>Link 3</NavLink>
        </NavItem>
      </Nav>
  </div>
  )
}

BootStrap is able to parse in the active class with other mandatory class as follows

<a id="b" href="#" class="active nav-link">Link 2</a>