Can't render react component: ReactJS unexpected token error

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;

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