ReactJS, how to render a component within another component's render method?

Question

I am learning ReactJS, apologies if the question is basic.

I created a component:

import React, { Component } from 'react';

class title2 extends Component {
  constructor(props){
    super(props);
  }
      render() {
        return (
          <div className="shopping-list">
            <h1>Shopping List for {this.props.name}</h1>
            <ul>
              <li>Item 1</li>
              <li>Item 2</li>
              <li>Item 3</li>
            </ul>
          </div>
        );
      }
  }
export default title2;

I want to render the component "title2" from my main component (App):

import React, { Component } from 'react';
import './App.css';
import title2 from './title2';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { name2: 'world', };
  }

  render() {
    return (
      <div className="App">            
        Hello {this.state.name2}

        {title2}
       
      </div>
    );
  }
}
export default App;

This, in browser, displays "Hello world", however, it doesn't output anything from the "title2" component, and it doesn't result in error either. How can I solve this?

0xc14m1z · Accepted Answer · 2019-01-10 14:40:24Z

2

You should import it with the capital T:

import Title2 from './title2';

And then use it as a component:

render() {
  return (
    <div className="App">            
      Hello {this.state.name2}

      <Title2 name="whatever name" />

    </div>
  );
}

answered Jan 10, 2019 at 14:40

0xc14m1z

3,7252 gold badges16 silver badges24 bronze badges

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

Comments

messerbill · Accepted Answer · 2019-01-10 14:40:51Z

0

React components should be named in UpperCamelCase. So change class title2 extends Component to class Title2 extends Component. Afterwards include the component like so:

render() {
  return (
    <div className="App">            
      Hello {this.state.name2}

      <Title2 />

    </div>
  );
}

greetings

answered Jan 10, 2019 at 14:40

messerbill

5,6391 gold badge31 silver badges39 bronze badges

2 Comments

Jeff.D Over a year ago

Just using <title2 /> didn't solve it. This (UpperCamelCase naming) solved it, thanks. I thought the naming was good practice, I didn't know it was essential/imperative.

messerbill Over a year ago

if it solved your issue please mark it with the green check :)

Community · Accepted Answer · 2020-06-20 09:12:55Z

Change title2 to Title2. From official React documentation:

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.

See: https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

Also put Title2 inside a tag instead of curly braces: <Title2 />

Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX expression, Foo must be in scope.

See: https://reactjs.org/docs/jsx-in-depth.html#specifying-the-react-element-type

Collectives™ on Stack Overflow

ReactJS, how to render a component within another component's render method?

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related