I have been using ant-desing for some parts of my project but when I use antd menu this is causing Findmode is deprecated bugs and I want to write dynamic sidebar menu , can anyone give me useful ideas about it

CodePudding user response：

In this link You got dynamic-dropdown Package: You can create a dynamic dropdown by passing an array according to your requirements. This package will mostly fulfill many kinds of dropdown menu component requirements when developing react apps.

Install :

npm install --save dynamic-dropdown

Usage :

import React from 'react'

import { DropDown } from 'dynamic-dropdown'
import 'dynamic-dropdown/dist/index.css'

const App = () => {
  const options = [
    { value: 'Spring', label: 'Spring' },
    { value: 'Summer', label: 'Summer' },
    { value: 'Autumn', label: 'Autumn' },
    { value: 'Winter', label: 'Winter' }
  ]

  const styles = {
    selection: { width: 300, borderRadius: 10 }, //Styles for dropdown menu
    div: {}, //Styles for div
    options: {} //Styles for dropdown selection option
  }

  return (
    <DropDown
      elements={options}
      selection={styles.selection}
      div={styles.div}
      options={styles.options}
    />
  )
}

export default App

CodePudding user response：

1. Create component for row of your dropdown.
2. Get texts or values of dropdown rows from state.
3. When you want to add row to your dropdown just update your state.