How to iterate children obtained from ReactDOMRe.domElementToObj?

Question

I'm trying to implement the FLIP animation technique. I have to access the getBoundingClientRect() of react's element children.

let ref = React.useRef(Js.Nullable.null);

<div ref={ReactDOMRe.Ref.domRef(ref)}>
  {Belt.List.map(items, item => {
    // ...
  })}
</div>

I'm accessing ref content in this way:

let elMaybe = ref->React.Ref.current->Js.Nullable.toOption;

then children of DOM element:

let children = el->ReactDOMRe.domElementToObj##children;

I have a problem with the children. If i use Js.log(children), I see in dev console proper list of children. But List.length(children) always returns 2.

This code:

Belt.List.map(children, child => {
  Js.log(child)
});

logs only the first child and undefined.

How should I iterate those children? Is there any better way to debug contents of object than Js.log?

Answer 1

children is not a list, it's an array. You won't ever get lists from JavaScript, because it doesn't exist as a concept there.

Just use Array.length and Belt.Array.map instead, then you should be good.

See the Reason documentation on List & Array for more details.