Créer un composant React qui reçoit des "accessoires" contenant l'attribut "message"

J'essaie de créer un composant React qui reçoit des accessoires contenant un message d'attribut. Le composant rend le texte "Trop long" si la longueur de la valeur du message est supérieure à 10. Sinon, la valeur du message est rendue.

mon code App.js :

import React from 'react';
import './App.css';

function App(props) {
  return (
    <div className="App">
      {props.message}
    </div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';


ReactDOM.render(
  <React.StrictMode>
    <App message="Hello World"/>
  </React.StrictMode>,
  document.getElementById('root')
);

Voici comment l'application devrait fonctionner : https://imgur.com/a/1LaQitZ Je ne sais pas comment procéder.

Vous pouvez donc procéder de deux manières

1. Utilisation de If else

<div className="App">
      {
          if(props.message.length > 10){
               return "Too Long"
          }else{
               return props.message
          }

      }
    </div>

2. Utiliser l'opérateur ternaire

 {props.message.length > 10 ? 'Too Long': props.message}