Create React component that receive “props” that contains attribute “message”

I would do this:

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;

Just use a ternary operator to conditionally render either the props.message value or the string 'Too long' if it’s length is greater than 10.