Can't render react component: ReactJS unexpected token error

Question

I am trying to render a react component dynamically but I am getting an unexpected token error and am not sure why.

Error:

./src/App.js
  Line 9:3:  Parsing error: Unexpected token

   7 | 
   8 | 
>  9 |   <ContactCards
     |   ^
  10 |   contact={{name: "Mr whiskerson", imgurl: "http://placekitten.com/300/300", phone:"04019292", email: "[email protected]"}}
  11 |   />
  12 |

My code:

import React from 'react';
import ContactCards from './ContactCards'

function App() {
  return (
    <div className="contacts"


  <ContactCards
  contact={{name: "Mr whiskerson", imgurl: "http://placekitten.com/300/300", phone:"04019292", email: "[email protected]"}}
  />


  <ContactCards
  contact={{name: "Mr Jack Sparrow", imgurl: "http://placekitten.com/300/300", phone:"(252) 9483282)", email: "[email protected]"}}
  />

  <ContactCards
  contact={{name: "Mr Jiu Hello Cat", imgurl: "http://placekitten.com/300/300", phone:"(852) 0411928483", email: "[email protected] "}}
  />
</div>
  );
}

export default App;

taylorallen0913 · Accepted Answer · 2020-03-28 23:31:23Z

1

It looks like you didn't close off the div at

<div className="contacts"

End the tag with a closing token.

<div className="contacts">

answered Mar 28, 2020 at 23:31

taylorallen0913

958 bronze badges

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

Comments

Zohaib · Accepted Answer · 2020-03-28 23:32:52Z

0

Single Curly braces are used to paas props to a component. You are using double curly braces instead use single

<ContactCards
 contact={name: "Mr whiskerson", imgurl: "http://placekitten.com/300/300", 
 phone:"04019292", email: "[email protected]"}
/>

answered Mar 28, 2020 at 23:32

Zohaib

1,03710 silver badges13 bronze badges

Collectives™ on Stack Overflow

Can't render react component: ReactJS unexpected token error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related