Using generalized components in React - reactjs

Question

Say I wanted a generalized component for a dropdown like so:
import React, { useState } from "react";
export default function DropDown() {
const [menuOpen, setMenuOpen] = useState(false);
const clickHandler = () => {
setMenuOpen(true);
setTimeout(() => {
setMenuOpen(false);
}, 2000);
props.onClick();
}
return (
<p>Dropdown</p>
{menuOpen && <p>{props.text}</p>}
)
}
I want to then be able to use this dropdown for several components (e.g. a save button, switch between light and dark modes, etc.).
Here's a sample save button:
import React from "react";
import DropDown from "./DropDown";
export default function SaveButton() {
return (
<DropDown text="Save" onClick={() => console.log("Saved")}
)
}
For the light and dark mode button, I would want to console.log whether we're currently on light or dark mode.
import React from "react";
import DropDown from "./DropDown";
export default function LightDark() {
return (
<DropDown text="Save" onClick={() => console.log(menuOpen ? "light" : "dark")}
) // Don't have access to menuOpen
}
I know this is a simple example (the actual code I'm working on involves more complicated casework). But what's the best way to deal with a situation like this, where I want to combine functionality into a general component, but the individual components differ enough that it may be difficult? Here are some of my thoughts: to use casework in generalized component (Case 1), to handle it within the save button or light/dark mode component (Case 2)? Or perhaps another solution?
Case 1 Example:
// DropDown.js
const clickHandler = () => {
setMenuOpen(true);
setTimeout(() => {
setMenuOpen(false);
}, 2000);
if (props.text === "Save") {
// Blah
} else {
// Blah
} // Although this doesn't seem like a good solution for more complicated cases where this generalized component may be used a lot
}
Case 2 Example:
// LightDark.js
import React from "react";
import DropDown from "./DropDown";
export default function LightDark() {
return (
<DropDown text="Save" onClick={(menuOpen) => console.log(menuOpen ? "light" : "dark")} // menuOpen passed from higher order component, also doesn't feel like a good solution when things get complicated
)
}
It may be worth noting that I would like to use functional components.

Answer 1

I understood you want to create a UI component that provides some sort of context menu and can be reused for different actions (e.g. changing the theme, saving/discarding content). Provided my interpretation is correct, the example below might help you to achieve what you want.
Some additional remarks:
I suggest being careful with the term Dropdown in this context as what you're looking for IMO is closer to a context menu
To store the theme (or any value that should be globally available across your app), you'd want to use a React Context rather than a state.
Once you have a good overview over the use cases you'd want to use this component for, you should review the case for re-use and weigh its benefits against the complexity it forces you to introduce
const { useState, useEffect } = React;
const ThemeContext = React.createContext("dark");
const CustomMenu = (props) => {
const [menuOpen, setMenuOpen] = useState(false);
const handleLabelClick = () => {
setMenuOpen(true);
setTimeout(() => {
setMenuOpen(false);
}, 2000);
};
return (
<div>
<button onClick={handleLabelClick}> {props.label} </button>
{menuOpen &&
props.options.map((e) => <p onClick={e.action}> {e.label} </p>)}
</div>
);
};
const App = () => {
const [theme, setTheme] = useState("light");
useEffect(() => {
console.log(`Theme changed to ${theme}`);
}, [theme]);
const themeOptions = [
{
label: "light",
action: () => setTheme("light"),
},
{
label: "dark",
action: () => setTheme("dark"),
},
];
const saveOptions = [
{
label: "save",
action: () => console.log("saved"),
},
{
label: "discard",
action: () => console.log("discarded"),
},
];
return (
<div>
<CustomMenu label="Select Theme" options={themeOptions} />
<CustomMenu label="Action" options={saveOptions} />
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>