Не удается обработать реагирующий компонент: ReactJS неожиданная ошибка токена

Question

Я пытаюсь визуализировать реагирующий компонент динамически, но я получаю неожиданную ошибку токена и не знаю, почему.

, пожалуйста, игнорируйте: похоже, ваше сообщение в основном кодовое; пожалуйста, добавьте еще некоторые детали. Похоже, ваш пост в основном кодовый; пожалуйста, добавьте еще некоторые детали. Похоже, ваш пост в основном кодовый; пожалуйста, добавьте еще некоторые детали. Похоже, ваш пост в основном кодовый; пожалуйста, добавьте больше деталей.

Ошибка:

./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: "whiskahs@gmail.com"}}
  11 |   />
  12 | 

Мой код:

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: "whiskahs@gmail.com"}}
  />


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

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

export default App;

Answer 1

Похоже, вы не закрыли div в

<div className="contacts"

Завершите тег закрывающим токеном.

<div className="contacts">

Answer 2

Одиночные фигурные скобки используются для установки реквизита на компонент. Вы используете двойные фигурные скобки вместо одного

<ContactCards
 contact={name: "Mr whiskerson", imgurl: "http://placekitten.com/300/300", 
 phone:"04019292", email: "whiskahs@gmail.com"}
/>