Newbie - "class in class" in ReactJS

Question

I'm quite new to React and a little stuck. Could someone please explain me how to achieve the following?

I have a child class, something like

import React from 'react';
import PropTypes from 'prop-types';

class testClass extends React.Component {
    render() {
    const {fields} = this.props;

    return (
        <Text>
        blafasel
        </Text>
        )
    }
}

and a parent class like this:

import React from 'react';
import PropTypes from 'prop-types';
import testClass from './TestClass';

class testParentClass extends React.Component {
render() {
    const {fields} = this.props;

    return (
        ---> display testClass here
    );
}

hope you get the idea. Is this possible? I think so. But how?

T.J. Crowder · Accepted Answer · 2018-11-08 10:04:54Z

5

You do it the same way you did with Text:

return (
    <testClass />
);

But: Note that React component class names must be initially-capped (and in any case, it's the overwhelming convention in JavaScript to capitalize class names / constructor function names). So TestClass and TestParentClass rather than testClass and testParentClass, and then in TestParentClass's render:

return (
    <TestClass />
);

edited Nov 8, 2018 at 10:04

answered Nov 8, 2018 at 9:30

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

1 Comment

Lammi Over a year ago

Hi T. J., thanks, that did the trick. Didn't expect it to be that easy :)

Collectives™ on Stack Overflow

Newbie - "class in class" in ReactJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related