Estoy usando reaccionar. Quiero agregar un salto de línea <br> entre cadenas
'Sin resultados' y 'Intente con otro término de búsqueda'.
Intenté 'No results.<br>Please try another search term.'
pero no funciona, necesito agregar el <br> en el html.
¿Alguna idea de cómo resolverlo?
render() { let data = this.props.data; let isLoading = this.props.isLoading; let isDataEmpty = Object.entries(data).length === 0; let movieList = isLoading ? <Loader /> : isDataEmpty ? 'No results. Please try another search term.' : Object.entries(data).map((movie, index) => <MovieTile key={index} {...movie[1]} />); return ( <div className='movieList'>{movieList}</div> ); }Deberías usar JSX en lugar de una cadena:
<div>No results.<br />Please try another search term.</div>Debido a que cada jsx debe tener 1 contenedor, agregué un contenedor
<div>para la cadena.
Aquí está en su código:
render() { let data = this.props.data; let isLoading = this.props.isLoading; let isDataEmpty = Object.entries(data).length === 0; let movieList = isLoading ? <Loader /> : isDataEmpty ? <div>No results.<br />Please try another search term.</div> : Object.entries(data).map((movie, index) => <MovieTile key={index} {...movie[1]} />); return ( <div className='movieList'>{movieList}</div> ); }Puede usar espacios en blanco CSS para resolver el problema.
Reaccionar componente
render() { message = `No results. \n Please try another search term.`; return ( <div className='new-line'>{message}</div> ); }CSS
.new-line { white-space: pre-line; }PRODUCCIÓN
No results. Please try another search term.dividir texto en línea:
render() { ... <div> {this.props.data.split('\n').map( (it, i) => <div key={'x'+i}>{it}</div> )} </div> ...