reasonbucklescriptreason-react

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


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?


Solution

  • 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>
      };
    };