React does not recognize the `eventKey`(also activeKey) prop on a DOM element

Question

I get the following error in my React code, and I can't figure out why:

React does not recognize for both eventKey and activeKey .

This is what I have written so far:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      key: 1
    };
    this.handleSelect = this.handleSelect.bind(this);
  }

  handleSelect(key) {
    if (key === 1) {
      console.log(1);
      this.setState({ key: key });
    } else if (key === 2) {
      console.log(2);
      this.setState({ key: key });
    } else {
      console.log(3);
      this.setState({ key: key });
    }
  }
  render() {
    const { classes } = this.props;

    return (
      <div className={classes.root}>
        <AppHeader
          renderNav={({ getNavProps }) => (
            <div {...getNavProps({})}>
              <Tabs
                centered
                defaultValue={"Home"}
                displayName={"defaultExample"}
                noBorder
                renderTab={({ getTabProps }) => <Tab {...getTabProps()} />}
                activeKey={this.state.key}
                onSelect={this.handleSelect}
                id="controlled-tab-example"
              >
                <Tab eventKey={1} title="Tab 1" className={classes.tab}>
                  Tab 1 content
                </Tab>
                <Tab eventKey={2} title="Tab 2" className={classes.tab}>
                  Tab 2 content
                </Tab>
                <Tab eventKey={3} title="Tab 3" className={classes.tab}>
                  Tab 3 content
                </Tab>
              </Tabs>
            </div>
          )}
        />
      </div>
    );
  }
}

export default withStyles(styles)(App);

Answer 1

Sounds like you might be running into something like this: https://reactjs.org/warnings/unknown-prop.html

This is my best guess, I cannot diagnose further because I would need to see the structure of the Tabs and Tab components.

Answer 2

Usually, eventKeys throw this kind of errors. Try to find alternatives for eventKeys, and your problem will be solved. (I don't think it is a mandatory prop in tabs anyway).