Question

47

React Native - How do we know what child element is contained by parent?

rated 0 times [ 49] [ 2] / answers: 1 / hits: 6939 / 4 Years ago, mon, march 16, 2020, 12:00:00

I'm creating a simple custom component that will set dynamic height and width within text.

Class CustomComponent extends React.Component{

  render(){

    if(this.props.children){

      if(this.state.isLoading){

        console.log(this.props.children)



        //Here i want to know what JSX is passing



        return(

          <View>

            <ActivityIndicator size={'large'}/>

          </View>

        )

      }

      return(

        <ImageBackground

          source={this.props.source}

        >

          {this.props.children}

        </ImageBackground>

      )

    } else if(this.state.isLoading){

      return(

        <View>

          <ActivityIndicator size={'large'}/>

        </View>

      )

    } else return(

      <Image

        source={this.props.source}

      />

    )

  }

}

//Use with text

<CustomComponent>

  <View>

    <Image {passing image} />

    <Text>Sample</Text>

  </View>

</CustomComponent>

But now i need to handle if the children only passing <Images/> with <Text> or not, any suggestion?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dusty

Add To Favorites

Follow

Total Points: 739

Total Questions: 97

Total Answers: 85

Location: Angola

Member since Wed, Apr 13, 2022

2 Years ago

dusty questions

1 js fetch post works, but php is empty

Mon, Dec 14, 20, 00:00, 4 Years ago

1 Nested function component ReactJS

Mon, Mar 23, 20, 00:00, 4 Years ago

1 Postman : How to assert all array elements exist in other array?

Fri, Jul 12, 19, 00:00, 5 Years ago

1 How to fix this error Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': 'div.com[min=]' is not a valid selector?

Thu, Jun 13, 19, 00:00, 5 Years ago

1 Exporting elements with alias in Typescript/Javascript

Fri, May 17, 19, 00:00, 5 Years ago

View All

answered 4 Years ago kaya · Accepted Answer

If there are multiple elements, the children passed by props is actually an array,

children:  



[0]: <Image {passing image} />

[1]: <Text>Sample</Text>

If you arrange the child elements like below and the structure is fixed.

  <View>

    <Image {passing image} />

    <Text>Sample</Text>

  </View>

You can visit the children array of the children via (with optional chaining perhaps)

this.props.children.props.children[1].type === 'Text'

which means in your situation, you can check the length of it, or whether the second element's type fit Text, to find out if the Text component is been passed or not.

Try it online:

Update

If we want the full view of the children, console without the attribute type would be good.

this.props.children.props.children[1]

type: div

key: null

ref: null

props: Object

_owner: FiberNode

_store: Object