Flow: `length` property not found in React.ChildrenArray

Created on 26 Sep 2017  路  2Comments  路  Source: facebook/flow

0.54.0

For the following code where I apply a margin to every child except the last:

import * as React from "react";

type Props = {
  children: React.ChildrenArray<React.Element<any>>,
}

const Group = ({children}: Props) => {
  const items = React.Children.map(children, (child, i) => (
    React.cloneElement(
      child,
      i < children.length - 1 ? {
        style: {marginBottom: 10}
      } : {}
    )
  ))
}

I receive the following flow error in flowtry:

11:       i < children.length - 1 ? {
                       ^ property `length`. Property not found in
[LIB] static/v0.55.0/flowlib/react.js:157: declare type React$Element<+ElementType: React$ElementType> = {|                                                                                                         ^ object type

Why does flow report that a ChildrenArray has no length property?

flowtry link

Most helpful comment

Why not use Children.count? children is supposed to be opaque.

All 2 comments

Why not use Children.count? children is supposed to be opaque.

Thanks @apalm - using React.Children.count(children) worked for me :D

Was this page helpful?
0 / 5 - 0 ratings