How do I pass Variants as props to React Components in ReasonML?

Question

I have tried the following approach to be able to send variants as props.

type ipAddr =
  | IPV4
  | IPV8;


[@react.component]
let make = () => {
  let appData = Data.tileData;
  <div className="App">
    <header className="flex outline justify-between" />
    <Content selected={ipAddr.IPV4} appData />
  </div>;
};

But it throws the error,

ninja: error: rebuilding 'build.ninja': subcommand failed

I have tried sending variants directly to Component as well.

  <div className="App">
    <header className="flex outline justify-between" />
    <Content selected=IPV4 appData />
  </div>;

But it ended up returning another error

Start compiling ninja: error: dependency cycle: src/App-ReactHooksTemplate.cmj -> src/Content-ReactHooksTemplate.cmj -> src/App-ReactHooksTemplate.cmj Finish compiling(exit: 1)

Where am I going wrong?

Answer 1

I have solved this another way. Instead of passing the variant as prop, I simply rendered different components based on variant value.

[@react.component]
let make = () => {
  let appData = Data.tileData;
  switch (selected) {
  | IPV4 =>
    <div>
      <IPV4Renderer appData />
    </div>
  | IPV6 =>
    <div>
      <IPV6Renderer appData />
    </div>
  };
};