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

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.

Montrez la meilleure réponse

Utilisez simplement {props.message.length <10 ? props.message : 'Trop long'}

Je ferais ceci :

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

function App(props) {
  return (
    <div className="App">
      {props.message.length > 10 ? 'Too long' : props.message}
    </div>
  );
}

export default App;

Utilisez simplement un opérateur ternaire pour rendre conditionnellement la valeur props.message ou la chaîne 'Too long' si sa longueur est supérieure à 10.

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>
  1. Utiliser l'opérateur ternaire
 {props.message.length > 10 ? 'Too Long': props.message}