CODEWITHSUNDEEP
javascriptreactjsantd
azro
azro

Reputation: 54148

How to change style of MenuItem (antd) when changing dynamically?

I have a Menu with some Menu.Item, each one gives access to a different content. From one content I'd like to dynamically move to another content but as they are represented by a Item (for the user to see where he is) I need to get the Item styled, and as I don't click on it, none of the Item is style after this

Here is a demo : Online Demo

// antd imports

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { currentPage: "0" };
  }

  handleMenuClick(e) {
    this.setState({ currentPage: e.key });
  }

  render() {
    return (
      <div className="App">
        <Menu onClick={e => this.handleMenuClick(e)}
          selectedKeys={[this.state.currentPage]}
          mode="horizontal">
          <Menu.Item tab="P1" key="0">  P1 </Menu.Item>
          <Menu.Item tab="P2" key="1"> P2 </Menu.Item>
        </Menu>

        <Row> {this.getPage()} </Row>
        <Button type="primary" onClick={() => this.action()}> Primary </Button>
      </div>
    );
  }

  getPage() {
    const pageKey = parseInt(this.state.currentPage, 10);
    if (pageKey === 0) {
      return <span>Page 1</span>;
    } else if (pageKey === 1) {
      return <span>Page 2</span>;
    }
    return <span>NOTHING TO DISPLAY</span>;
  }

  action() {
    this.setState({ currentPage: 1 });
  }
}

For now the Menu is correctly styled if I click from one Item to another, but when I use action() method, it shows the good content byt the item is not styled

Upvotes: 1

Views: 174

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53884

selectedKeys accepts an array of strings: string[], while on action you provide a Number which makes selectedKeys a number[] type.

To fix it, return a string at action code:

action = () => {
//                              v Needs to be a type of `String`
  this.setState({ currentPage: '1' });
};

Edit Q-58781283-SelectedKeys

Upvotes: 1

Related Questions