When working with React, passing props with the same name will result in only the last one being selected. It's recommended to use unique and descriptive names for style props, rather than just "style," to avoid confusion and maintain clarity.
To differentiate between two different styles, assign unique names in the App.js file:
<div className="App">
<Dropdown
inputName="viola"
list={[
{ yard_id: "1", yard_name: "Yard 1" },
{ yard_id: "2", yard_name: "Yard 2" }
]}
// this style is for className="select-box-current"
currentStyles={{ border: "1px solid #D4D4D4" }}
// this style is for className="select-box-list"
listStyles={{
opacity: 1,
display: "inherit",
animationName: "none",
cursor: "pointer"
}}
/>
</div>
Next, pass these props through your component tree in the Dropdown.js file.
Before delving into prop passing, there's an issue that needs mentioning, albeit not directly related.
export const Dropdown = ({ list, ...others }) => {
const copiedProps = {};
Object.keys(others).forEach((key) => {
// These are the props that need to be passed through:
if ("style" === key || "className" === key) {
copiedProps[key] = others[key];
}
});
...
The unnecessary copying of props can actually be counterproductive. Directly access specific incoming props (e.g., props.myProp or other.style) or utilize destructuring assignment.
To accommodate only passing the necessary props, utilize destructuring assignment as shown below:
export const Dropdown = ({
list,
currentStyles,
listStyles,
className,
...others
}) => { ... }
Once the required props are specified, proceed to pass them into the DropdownView, where the targeted elements reside.
<DropdownView
dropdownItems={dropdownItems}
activeItem={activeItem}
hover={hover}
setActiveItem={(activeItem) => {
setActiveItem(activeItem);
}}
onMouseOver={(hover) => onMouseOver(hover)}
toggleList={() => toggleList(!hideList)}
hideList={hideList}
className={className}
currentStyles={currentStyles}
listStyles={listStyles}
/>
After placing the styles and classname appropriately, set them on the desired elements by retrieving and applying the props as demonstrated earlier.
<div
className="select-box-current"
tabIndex="0"
autoFocus={true}
onClick={() => toggleList()}
style={currentStyles}
>...</div>
A working example is available through the provided sandbox link. Note that the className prop in DropdowView was not utilized due to ambiguity regarding its intended element.
https://codesandbox.io/s/hardcore-sun-yyx0g?file=/src/DropdownView.jsx