In ReactJs, How do I create subcomponent using extends

Question

In the below snippet, I am using extends to create components. which is not working. But If I use React.createClass({}); It works fine. Could you please let me know what the problem is in below code snippet

import React from 'react';

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

class AuditTable extends React.Component {
render(){
    return(
        <div> This is audit table 
            <AuditTable.Header/>
        </div>
    );
}
}

class AuditTable.Header extends React.Component{
render(){
    return(
        <div>
            Audit Table Header
        </div>
    );
}
}

export default App;

This code does not work. Any help would be great

class AuditTable.Header isn't legal. Rename it to Header or AuditTableHeader. — Mister Epic
– Mister Epic, Commented Jan 10, 2017 at 19:30

KAEH · Accepted Answer · 2017-01-10 19:59:24Z

5

import React from 'react';

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


var AuditTable = class AuditTable extends React.Component {
    render(){
        return(
            <div>
                <AuditTable.Header/>
                <AuditTable.Row/>
            </div>
        );
    }
}

AuditTable.Header = class Header extends React.Component{
    render(){
        return(
            <div>
                Audit Table Header
            </div>
        );
    }
}

answered Jan 10, 2017 at 19:59

KAEH

663 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

anandharshan · Accepted Answer · 2017-01-10 19:56:18Z

2

I got the solution to the question I posted

var AuditTable = class AuditTable extends React.Component { ... }
AuditTable.Header = class Header extends React.Component { ... }
AuditTable.Row = class Row extends React.Component { ... }

creating a class and assigning to ca variable worked

Thanks Guys

answered Jan 10, 2017 at 19:56

anandharshan

6,4504 gold badges39 silver badges36 bronze badges

Comments

Freez · Accepted Answer · 2017-01-10 19:42:58Z

AuditTable.Header is not a valid class name (because it contains a dot). If you want to export your sub-components as static properties of your component, you have two possibilities :

1/ Declare a Header component, then assign it to AuditTable.Header

const Header extends React.Component{
  render(){
    return(
      <div>
        Audit Table Header
      </div>
    );
  }
}

AuditTable.Header = header;

2/ Declare directly Header as a static property of AuditTable

class AuditTable extends React.Component {

  static Header = class extends React.Component{
    render(){
      return(
        <div>
          Audit Table Header
        </div>
      );
    }
  }

  render(){
    return(
      <div> This is audit table 
        <AuditTable.Header/>
      </div>
    );
  }
}

mr. rogers · Accepted Answer · 2017-01-10 19:31:48Z

0

Change AuditTable.Header to AuditTableHeader and your code should work as intended.

React.Component is not the name of the class you extend. There's an object named React that has a key named Component which is the class you extend.

answered Jan 10, 2017 at 19:31

mr. rogers

713 bronze badges

1 Comment

Asking Over a year ago

how to do this with functional component?

Collectives™ on Stack Overflow

In ReactJs, How do I create subcomponent using extends

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related