I have a question.
I am making a react-application for a major industry, which contains a huge number of components.
But I have found that most of my components utilised the same functionalities . For eg, I am making use of Material Ui as my UI Component Library.
I have around 10 - 15 MUI-AutoComplete components lying into different sections of the visible browser UI, and I have found that all of these autocomplete components share similar functionalities,
except for "options", onChange, onOpen, onClose, value, and RenderInput's which I could further remove using props, and switch-case logic.
I want to use my components as a single component say, "AppAutoComplete.tsx", which takes care of all of my Autocomplete , that I am using into the different places throughpout my Application, only I have to import this file "AppAutoComplete" into where-ever I want to make use of them, and just tweaking and introducing a new case for each function I receive from the respective component.
I want to know, is this a good approach for centralising components for a major application? Is this a good way of reducing the similar boilerplate code, from different places into the code base? Would It create potential dangers, which I might not be aware of this way?
I think this way of writing code would help other developers to keep the track of code written for the app, and also aid in writing the maintainable code. i mean, all you have to do is tweak/indroduce a new -case for your very new usage of Autocomplete.
the switch includes props.placeName as argument, which I would pass specifially for differnet places where I would Be going to use the Autocomplete
say , If I use autocomplete into different pages, then
**props.PlaceName**
case '`homePage`' : do something specific for home - page's autocomplete
case '`contactPage`' : do something specific for contact- page's autocomplete
case '`servicePage`' : do something specific for service- page's autocomplete, ...ans so on.
Please suggest me what is the better approach? Should I write the Autocomplete for every-single component, where I am going to make a use of it? or , should I centralize all the Autocompletes, and target then with switch-case?
Ofcourse creating a separate component for autocomplete is a good idea! you can create a AppAutocomplete.js file that takes properties such as "options, onChange, onOpen, onClose, value" as a prop and passes it into autocomplete component as a props and returns new Autocomplete component.