How to organize one React component with different wrapper components? - reactjs

Question

I need some ideas for a folder structure/mental model in React.
I have an Item component. It stays the same.
It can be wrapped in either a Link with a URL prop or a Button with an onClick prop.
My current folder structure solution looks like this:
-Item
-wrapperComponents
-Link
-Button
Both the Link and Button components wrap around the children prop. Much like this:
react stuff ...
return(
<button onClick={props.handleOnClick}>
{props.children}
</button>
)
And this is how I call them:
<Button>
<Item />
</Button>
or
<Link>
<Item />
</Link>
I am looking for a better, more elegant solution.
I've tried sending the wrapper components to the Item but React doesn't allow to use them as a wrapper that would take children.

Answer 1

This is what you can do:
import "./styles.css";
import Item from "./Item";
import Wrapper1 from "./Wrapper1";
export default function App() {
return (
<div className="App">
<Item wrapper={Wrapper1} />
</div>
);
}
Item component:
const Item = ({ wrapper: Wrapper }) => {
return (
<Wrapper>
<div>This is my child</div>
</Wrapper>
);
};
export default Item;
Wrapper component:
const Wrapper1 = ({ children }) => {
return (
<div>
This is my wrapper
{children}
</div>
);
};
export default Wrapper1;
https://codesandbox.io/s/quirky-vaughan-4op2l1?file=/src/index.js

Answer 2

I've come up with this solution with the help you you guys
https://codesandbox.io/s/create-react-app-forked-wlmkyv?file=/src/App.js
Main component App.js:
import * as React from "react";
import Wrapper from "./components/Wrapper";
import Item from "./components/Item";
function App() {
return (
<div>
<Item wrapper={Wrapper} wrapperProps={{ color: "orange" }} />
</div>
);
}
export default App;
Item component Item.js:
import * as React from "react";
function Item(props) {
const Wrapper = props.wrapper;
const wrapperProps = props.wrapperProps;
return (
<Wrapper {...wrapperProps}>
<div>An Item</div>
</Wrapper>
);
}
export default Item;
Wrapper component Wrapper.js:
import * as React from "react";
function Wrapper(props) {
return (
<div style={{ backgroundColor: props.color || "red" }}>
{props.children}
</div>
);
}
export default Wrapper;