Default select tab React.js

Question

Hi the js code below represents a TabContent which displays multiple tabs which contain a table depending on the tabcontenet the problem is that when the component starts up the tab is not selected automatically even if activeTab is set to 1, can you explain me what is not working? So the tab must be selected automatically based on its selection

React.js Code:

import {
  Navbar,
  Nav,
  NavItem,
  NavLink,
  InputGroupAddon,
  InputGroupText,
  InputGroup,
  Input,
  Dropdown,
  Collapse,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Badge,
  ButtonGroup,
  Button,
  Form,
  FormGroup,
  TabContent,
  TabPane,
  Row,
  Table,
  UncontrolledButtonDropdown
} from 'reactstrap';
import classnames from 'classnames';
import Widget from '../../../components/Widget';
import s from './Icons.module.scss';

class GestioneFiliale extends React.Component {

  state = {

    activeTab: 1,
    idcliente: '',
    ragionesociale:'',
  };

  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
      tableStyles: []
  };
  }

  toggle(tab) {
    if (this.state.activeTab !== tab) {
      this.setState({
        activeTab: tab,
       
      });
    }
  }

  render() {
  
    return (
      <section className={`${s.root} mb-4`}>
        <h1 className="page-title">Gestione Filiali - <span className="fw-semi-bold">Clienti</span></h1>

        <Nav className="bg-transparent" tabs>
          <NavItem>
            <NavLink
              className={classnames({ active: this.state.activeTab === '1' })}
              onClick={() => { this.toggle('1'); }}
            >
              <span>Filiali</span>
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink
              className={classnames({ active: this.state.activeTab === '2' })}
              onClick={() => { this.toggle('2'); }}
            >
              <span className="mr-xs">Riferimenti</span>
              <Badge color="primary">Nuovo</Badge>
            </NavLink>
          </NavItem>
          
        </Nav>

        <TabContent activeTab={this.state.activeTab}>
          <TabPane tabId="1">
            <div>
              <h4>Gestione Filiali: <span className="fw-semi-bold"> {this.props.location.state.ragionesociale}</span></h4>
              <Row className="icon-list">
                  <Widget settings close bodyClass={s.mainTableWidget}> <p> </p> <p> </p> <p> </p> <p> </p> <FormGroup> <InputGroup className="input-group-no-border"> <InputGroupAddon addonType="prepend"> <InputGroupText> <i className="fa fa-search text-white" /> </InputGroupText>{' '} </InputGroupAddon>{' '} 
                  <Input id="search-input" className="input-transparent" placeholder="Ricerca" type="text" onChange={this.handleChange} />{' '} 
                  </InputGroup>{' '} </FormGroup>{' '} <Table striped> <thead> <tr className="fs-sm"> <th className="hidden-sm-down"> # </th> <th> Citta </th>{' '} <th> provincia </th> <th className="hidden-sm-down"> Via </th>{' '} <th className="hidden-sm-down"> CAP </th>{' '} <th className="hidden-sm-down"> CAP </th>{' '} <th className="hidden-sm-down"> Edit </th>{' '} </tr>{' '} </thead>{' '}
                   <tbody> {' '} {this.state.tableStyles.map((row) =>(<tr key={row.id}> <td> {row.id} </td>{' '} <td> <img className="img-rounded" src={row.picture} alt="" height="50" /> </td>{' '} <td> {' '} {row.description}{' '} {row.label &&(<div> <Badge color={row.label.colorClass}> {' '} {row.label.text}{' '} </Badge>{' '} </div>)}{' '} </td>{' '} <td> <p className="mb-0"> <small> Città: <span className="text-muted fw-semi-bold">  {row.info.citta}{' '} </span>{' '} </small>{' '} </p>{' '} <p> <small> Provincia: <span className="text-muted fw-semi-bold"> {row.info.provincia}{' '} </span>{' '} </small>{' '} </p>{' '} </td>{' '} <td className="text-muted"> {row.DataInserimento} </td>{' '} <td className="text-muted"> {row.Cap} </td>{' '} <td className="width-150"> <Button color="default" className="mr-2" size="sm" onClick={() => this.getEventEditUser(row.id, row.description, row.Indirizzo, row.info.provincia, row.PartitaIVA, row.CodiceFiscale, row.Titolo, row.FAX, row.PEC, row.Dirittochiamata, row.SDI, row.RimborsoKM, row.info.citta, row.info.cap, row.Telefono, row.Email, row.Nome1, row.Nome2, row.Cellulare1, row.Cellulare2, row.Sconto1, row.Sconto2, row.Sconto3, row.IBAN,row.Applicaprezzorisorsegiornaliero)} > Modifica{' '} </Button> </td>{' '} </tr>))}{' '} </tbody>{' '} </Table>{' '} <div className="clearfix"> <div className="float-right"> <Button color="default" className="mr-2" size="sm"> Refresh... </Button>{' '} <UncontrolledButtonDropdown> <DropdownToggle color="inverse" className="mr-xs" size="sm" caret> Nuovo Cliente{' '}
         </DropdownToggle>{' '} 
         <DropdownMenu> <DropdownItem> Inserisci ragione sociale </DropdownItem>{' '} <Input id="search-input"  name="ragionesociale"  className="input-transparent" placeholder="ragionesociale"  onChange={ this.handleChangetext }  value={ this.state.ragionesociale } type="text"  /> 
        <p></p>
        <div align="center">
        <Button color="success" className="mr-2" size="sm" onClick={this.confirm}> Inserisci </Button>
        </div>
         </DropdownMenu>{' '} </UncontrolledButtonDropdown>{' '} </div>{' '} <p> </p>{' '} </div>{' '} </Widget>{' '}
          
            </Row>
            </div>
          </TabPane>
          <TabPane tabId="2">
            <div>
              <h4>Gestione Riferimenti <span className="fw-semi-bold"> {this.props.location.state.ragionesociale} </span></h4>
              <Row className="icon-list">
              
              </Row>
            </div>
          </TabPane>
        </TabContent>
      </section>
      
    );
  }
}

Answer 1

As I see you have the state above the constructor and inside the constructor, so your top state will override in the constructor, so in that case this.state.activeTab will be undefined and the tabs will not work as you expected

what you could do is take the top state in to the constructor as

constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
        activeTab: 1,
        idcliente: '',
        ragionesociale:'',
        tableStyles: []
    };
}

and remove the top state definition above the constructor which is useless afthe above modification