React nested component rendering issue

Question

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)

You have a typo in your code. Abutton is missing the / for the self-closing tag. — Drew Reese
– Drew Reese, Commented Mar 16, 2020 at 2:46

Avanthika · Accepted Answer · 2020-03-16 02:46:23Z

1

You have mistakenly added </props> instead of </div> to close the tag.

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

<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>

answered Mar 16, 2020 at 2:46

Avanthika

4,1821 gold badge15 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

React nested component rendering issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related