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?

Try re-running the second version after cleaning the build — `npx bsb -clean-world && npx bsb -make-world`— and pasting *all* of the command output to gist.github.com or something like that. As far as I can tell, this should work, as presented in the question. — ELLIOTTCABLE, Apr 30 '19 at 19:17

score 1 · Answer 1 · answered Apr 30 '19 at 07:43

1

DISCLAIMER: I don't know ReasonML, however

If it was OCaml, you'd just write IPV4, no need to qualify it like ipAddr.IPV4.
Perhaps this is the same in Reason?

answered Apr 30 '19 at 07:43

P Varga

19,174
12
70
108

1

Yeah it would be just IPV4 – Hieu Pham Apr 30 '19 at 16:58
thank you for the suggestion. But i tried it already and updated question to reflect the same. – Deadfish Apr 30 '19 at 17:40
1

If `Content` is in a separate file and refers to `ipAddr` in this module, that would be a dependency cycle since the modules refer to each other, which they're not allowed to. You need to either move `ipAddr` to `Content` or to a separate module that both this module and `Content` can refer to. – glennsl Apr 30 '19 at 19:17
As mentioned, this was not a case of failed imports. – Deadfish May 01 '19 at 16:06

score 1 · Accepted Answer · answered May 01 '19 at 16:07

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

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

2 Answers2