react function component inside class component, is a valid component ? What is the difference?

Question

I'm trying to return a function component after the condition is checked within a class component. Here is my code:

 class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = props.warn;
  }

   function WarningBanner() {
    if (this.state == false) {
      return null;
    }

    return (
      <div className="warning">
        Warning!
      </div>
    );
  } 
  render() {
    return (
      <div>
        <WarningBanner />
      </div>
    );
  }
}

ReactDOM.render(
  <Page warn={true}/>,
  document.getElementById('root')
);

Is a function component inside a class component considered a valid component ? Or is there a another way to define a function component inside a class component?

What is the difference between a function component inside class component or a function component outside a class component ?

I have also tried doing this:

<WarningBanner warn = {this.state}/>

And

function WarningBanner(warning) {
    if (warning.warn == false) {
      return null;
    }
    return (<div className="warning">Warning!</div>);
  }

codepen.io/skeitnepal/pen/jOPMaLe?editors=0010

Suraj Neupane
– Suraj Neupane

2020-02-20 11:40:15 +00:00
Commented Feb 20, 2020 at 11:40 — Suraj Neupane
– Suraj Neupane, Commented Feb 20, 2020 at 11:40

Suraj Neupane · Accepted Answer · 2020-02-23 11:28:54Z

Yes, function compoment inside the class component is valid and it is possible to share state of main component too and their is no difference in function component and function component inside class component as individial component.
Problem here is entirely related to javascript rather than react. Here is the right code:

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: props.warn};
    this.warning = this.WarningBanner.bind(this);
  }
  WarningBanner() {
    if (this.state.value == false) { 
      return null;
    }
    return (<div className="warning">Warning!</div>);
  }

  render() {
    return (<div>{this.warning()}</div>);
  }
}

ReactDOM.render( <Page warn={true}/>, document.getElementById('root'));

Problem 1: function keyword can not be defined inside javascript class since class itself supposed to act like a function.

Problem 2: New functions in javascript class needs to be 'bind' and access by 'this.warning' variable.

I hope it will be useful for someone. Thanks.

Paul Martin · Accepted Answer · 2020-02-20 12:12:53Z

1

You could do something like...

    class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = props.warn;
  }

  render() {
    return (
      <div>
        {this.props.warn && <div className="warning">Warning!</div>}
      </div>
    );
  }
}

ReactDOM.render(
  <Page warn={true}/>,
  document.getElementById('root')
);

Where {this.props.warn && <div className="warning">Warning!</div>} will evaluate if the condition is true and, if so, render the component.

If you wanted to make a more complex functional component, I would suggest creating it outside of your stateful component like this...

const Warning = () => {
  return (<div className="warning">Warning!</div>);
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = props.warn;
  }

  render() {
    return (
      <div>
        {this.props.warn && <Warning />}
      </div>
    );
  }
}

ReactDOM.render(
  <Page warn={true}/>,
  document.getElementById('root')
);

I would recommend this method to comply with React best practices, as outside of codepen you would have different files for different components.

Here's a pen to illustrate: https://codepen.io/paulmartin91/pen/zYGKRNa

hope this helps!

answered Feb 20, 2020 at 12:12

Paul Martin

4693 silver badges9 bronze badges

5 Comments

Paul Martin Over a year ago

You could also render different components based on conditions, for example this.state.warn ? <Component1 /> : <Component2 />

Suraj Neupane Over a year ago

However, is it possible to (at all) to do somthing like that?

Paul Martin Over a year ago

I'm not sure what you mean, could you please elaborate?

Suraj Neupane Over a year ago

is functional component inside a class component is a valid component?

Paul Martin Over a year ago

You could put the component in the Render function, outside the return() function and it would also work. I'd always opt for the first method in this case though.

Ben Aston · Accepted Answer · 2020-02-20 12:28:12Z

I don't think nesting the definition of components like that is idiomatic.

Data can be shared between components using properties.

You can show or hide the banner using a conditional (here, I use the && operator) in your Page component like so:

function WarningBanner({message}) {
    return (<div className="warning">Warning!</div>)
} 

class Page extends React.Component {
  render() {
    return (
      <div>
        { this.props.showWarning && <WarningBanner /> }
      </div>
    )
  }
}

ReactDOM.render(
    <Page showWarning={true} />,
    document.getElementById('root')
)

* {
  font-family: sans-serif;
  margin: 0;
}
button {
  height: 40px;
  width: 200px;
}
.warning {
  background-color: red;
  text-align: center;
  width: 100%;
  padding: 10px;

  font-size: 14pt;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

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

Collectives™ on Stack Overflow

react function component inside class component, is a valid component ? What is the difference?

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related