How to organize one React component with different wrapper components?

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

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;