React native: Cannot add a child that doesn't have a YogaNode or parent node

Question

Just started learning react-native,

I have created one separate file flexdemo.js and created component as below:

import React, { Component } from \'react         


        

Answer 1

I want to give a more general answer here, because there can be several reasons for the issue returning the same error message. The three I have seen the most:

1. Comments might be the cause. But instead of removing comments make them work:

In the return()-part, variables need to be wrapped in {} like {this.state.foo} so wrapping the comments works fine...

    return(
         This works {/* it really does */}
    );

...as long as they are not the first or last element in the return statement:

    return(
      {/* This fails */}
       because the comment is in the beginning or end 
      {/* This also fails */}
    );

2. Conditional rendering might be the cause. If myCheck is undefined or an empty string this can fail:

    const myCheck = ""; /* or const myCheck = undefined */
    return(
      {myCheck && }
    );

but adding double negation !! works:

    const myCheck = ""; /* or const myCheck = undefined */
    return(
      {!!myCheck && }
    );

3. Whitespaces (or actually any strings) within a component can cause this, if not in a -Component:

Text in a View for example:

    /* This fails */
    return(
      it really does
    );

But also the tiny space between two components:

    /* *Space* fails: */
    return(
       it really does 
    );

But works if in a newline:

    return(
      
        {/* This works */}
        surprisingly it does
      
    );

Unfortunately these pitfalls do not always lead to errors. Sometimes they work. I guess this depends on which of all those many tools/libraries/components you use and their versions in your app.