Salut, je rencontre un problème sur React que j'ai du mal à resoudre

voici le code source 

function formatDate(date) {
  return date.toLocaleDateString();
}

function Avatar(props) {
  return (
    <img
      className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">{props.user.name}</div>
    </div>
  );
}

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">{props.text}</div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

const comment = {
  date: new Date(),
  text: 'I hope you enjoy learning React!',
  author: {
    name: 'Hello Kitty',
    avatarUrl: 'https://placekitten.com/g/64/64',
  },
};
ReactDOM.render(
  <Comment
    date={comment.date}
    text={comment.text}
    author={comment.author}
  />,
  document.getElementById('root')
);

cet exemple je l'ai trouvé sur codeopen et ça marche très bien mais quand j'essaie de le reproduire dans mon projet react ça ne marche pas.

j'ai créé un component dans lequel j'ai inséré le ci-dessus en enlevant le reactDOM.render et je l'ai exporté vers le component principal App en faisant 

export default Comment;

mais ça ne marche pas.

Voici le lien de l'exemple sur codeopen https://fr.reactjs.org/redirect-to-codepen/components-and-props/extracting-components-continued

-
Edité par EnochBeloved 20 septembre 2019 à 18:03:11

Salut, peux tu nous montrer de quelle maniere tu t'en sers dans ton projet ?

Ca devrait ressembler a

import Comment from 'path/to/file'



function AppComponent {

  return (

    <Comment {...comment}/>
  )

}

export default function Comment({date, text, author}) {
  return (...)
}