CODEWITHSUNDEEP
javascriptreactjsreact-native
Luis Monsalve
Luis Monsalve

Reputation: 160

React children count

i have a component like this

       <Slider 
         Arrows
         Autoplay
       >
          <SliderContentMall />
       </Slider>

and in SliderContentMall i make a map like this

const SliderContentMall = (props) => 
{
    return (
        props.Data.map(DataValue =>
        {
            return (
                <TouchableOpacity style={Styles.ImageContainer} onPress={() => {}>

                </TouchableOpacity>
            )
        })
    );
}

this map returns 3 object the things is in the slider component when i do

  console.log(React.Children.count(this.props.children))

it only return 1 and i need the count of the 3, i cant make the map in the slider directly the map needs to be in the SliderContentMall

Upvotes: 1

Views: 2421

Answers (2)

Nicholas Tower
Nicholas Tower

Reputation: 85032

React.Children.count is doing what it's intended to do: there's a single child, and that child is a <SliderContentMall>. It's not going to check how many children are underneath that, and in fact it can't since those children havn't been rendered yet. Rendering goes from top down, so while you're rendering the <Slider>, you have not yet rendered the <SliderContentMall>, and thus the various <TouchableOpacity>'s havn't even been thought of yet.

If the slider needs to know how many pieces of data will be rendered, the most straightforward way to do that is as a prop to the slider. For example:

<Slider 
  Arrows
  Autoplay
  count={data.length}
>
  <SliderContentMall data={data}/>
</Slider>

Upvotes: 1

Sonu Nigam
Sonu Nigam

Reputation: 277

You are using map function over props.Data instead of props.children.

Upvotes: 0

Related Questions