ReactJS is not rendering children

Question

this is my simple home.js code. None relevant code has been removed.


import Banner from '../components/Banner'
export default function Home() {
    return (
        <Hero> 
            <Banner title="luxurious rooms" subtitle="delux rooms starting at $299">
                <Link to="/rooms" className="btn-primary">
                    Our rooms
            </Link>
            </Banner>
        </Hero>

and this my banner.js

import React from 'react'

export default function Banner({childern,title,subtitle}) {
    return (
        <div className="banner">
            <h1>{title}</h1>
            <div />>
            <p>{subtitle}</p>
            {childern}
        </div>
    )
}

I don't understand why it is not rendering.

In the bedg I contd see <banner>. tag inside of hero. How can I solve this issue?

@AvinKavish yep already i fixed thank you but still same error — , Jun 19 '19 at 16:46
Possible duplicate of [What is {this.props.children} and when you should use it?](https://stackoverflow.com/questions/49706823/what-is-this-props-children-and-when-you-should-use-it) — jmargolisvt, Jun 19 '19 at 16:48
There's nothing else wrong here apart from the spelling error AFAIK — Avin Kavish, Jun 19 '19 at 16:52
You should consider using a rich IDE that catches syntax errors — Avin Kavish, Jun 19 '19 at 17:21

Rob B · Accepted Answer · 2019-06-19T19:26:25.970

Ok, I created a pen for this, but it's not saving so I'll add the code here. It looks like you are taking a difficult approach for a relatively easy concept. When you pass props to a component, you access them within that component using this.props.nameOfProp. You don't need to pass link as a child, just add Link inside the child component, and pass the info you need for the Link as props.

EDIT: Here's a working example https://codesandbox.io/embed/elegant-fast-m52bt

import React from "react";
import ReactDOM from "react-dom";
import Banner from "./Banner";
import { BrowserRouter as Router } from "react-router-dom";

class App extends React.Component {
  render() {
    return (
      <div>
        <Banner
          title={"luxurious rooms"}
          subtitle={"delux rooms starting at $299"}
          path={"/rooms"}
          classList={"btn-primary"}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.querySelector("#app")
);

Then your banner should look something like this:

import React from "react";
import { Link } from "react-router-dom";

class Banner extends React.Component {
  render() {
    return (
      <div className="banner">
        <h1>{this.props.title}</h1>
        <p>{this.props.subtitle}</p>
        <Link 
          to={this.props.path} 
          className={this.props.classList}
        >
        Link Text (could also be a prop)
        </Link>
      </div>
    );
  }
}

export default Banner;

ReactJS is not rendering children

1 Answers1