CODEWITHSUNDEEP
reactjs
ramamoorthy_villi
ramamoorthy_villi

Reputation: 2055

React nested component rendering issue

here is my code 

const Parent = (props) => <div> {props.children} </div>

it works: 

<Parent> <a href="/google">Click here </a> </Parent> 


This doesn't work 
<Parent> <Abutton /> </Parent> 

const Abutton = (props) => <a href="/google">Click here </a>

This is the issue

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components)

Upvotes: 0

Views: 68

Answers (1)

Avanthika
Avanthika

Reputation: 4182

  1. You have mistakenly added </props> instead of </div> to close the tag.
const Parent = (props) => <div> {props.children} </div>
  1. <Abutton /> needs to be closed.

I've attached working snippet here.

const Parent = (props) => <div> {props.children} </div>

const AButton = (props) => <a href="/link"> Link </a>


ReactDOM.render(
  <Parent><AButton /></Parent>,
  document.body
);
<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>

Upvotes: 1

Related Questions