Estoy tratando de crear un componente React que reciba accesorios que contengan un mensaje de atributo. El componente representa el texto 'Demasiado largo' si la longitud del valor del mensaje es superior a 10. De lo contrario, se representa el valor del mensaje.
mi código App.js:
import React from 'react'; import './App.css'; function App(props) { return ( <div className="App"> {props.message} </div> ); } export default App;índice.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') );Así es como debería funcionar la aplicación: https://imgur.com/a/1LaQitZ No estoy seguro de cómo proceder.
Yo haría esto:
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; Simplemente use un operador ternario para representar condicionalmente el valor props.message o la cadena 'Too long' si su longitud es mayor que 10.
Así que puedes hacer esto de dos maneras.
<div className="App"> { if(props.message.length > 10){ return "Too Long" }else{ return props.message } } </div> {props.message.length > 10 ? 'Too Long': props.message}