CODEWITHSUNDEEP
javascriptreactjs
Gabriel
Gabriel

Reputation: 969

Select Inner component in a React Component

im trying to do a Main component (in the example, Container), which can hold a inner component selectable, in the example is harcoded (the condition is set to true).

I need the inner component extends from React.Component, i cant use it like a function: const ChildOne = (.... )

There're 2 child component, the idea is to use more of them.

But, i can't, i got error when rendering the inner component:

Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

class ChildOne extends React.Component {
    render() {
        return (
            <div>
                <p> Child One </p>
            </div>
        )
    }
}

class ChildTwo extends React.Component {
    render() {
        return (
            <div>
                <p>Child Two</p>
            </div>
        )
    }
}

class Container extends React.Component {
    render() {
        let condition = true;   //Just for testing purpose

        let comp = null;
        if (condition)
            comp = ChildOne;
        else
            comp = ChildTwo;

        return (
                <main>
                    {comp}          
                </main>
        )
    }
}

class App extends React.Component {
    render() {
        return (
            <div>
                <div><Container /></div>
            </div>
        )
    }
}

https://jsfiddle.net/01L8amgs/

I ran out of ideas... thanks in advance.

Upvotes: 1

Views: 813

Answers (2)

Arup Rakshit
Arup Rakshit

Reputation: 118271

You should use capitalized letter, to assign a React custom component to a variable. Like Comp = ChildOne; or Comp = ChildTwo.. then just do <Comp />

From User-Defined Components Must Be Capitalized :

When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.

class ChildOne extends React.Component {
  render() {
    return (
      <div>
        <p> Child One </p>
      </div>
    );
  }
}

class ChildTwo extends React.Component {
  render() {
    return (
      <div>
        <p>Child Two</p>
      </div>
    );
  }
}

class Container extends React.Component {
  render() {
    let condition = true; //Just for testing purpose

    let Comp = null;
    if (condition) Comp = ChildOne;
    else Comp = ChildTwo;

    return (
      <main>
        <Comp />
      </main>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <div>
          <Container />
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Upvotes: 5

Cl&#233;ment Pr&#233;vost
Cl&#233;ment Pr&#233;vost

Reputation: 8600

You need to render components with the proper syntax: <Comp> instead of {comp}

Here is a working example: https://jsfiddle.net/01L8amgs/2/

Notice the Container class render function changed for this

class Container extends React.Component {
  render() {
      let condition = false;

      let Comp = null;      <===== Uppercased variable name
      if (condition) 
        Comp = ChildOne; 
      else
        Comp = ChildTwo; 

      return (
        <nain>
          <Comp />          <===== Render as component    
        </nain>
      )
  }
}

Upvotes: 1

Related Questions