0
203
Views¿Cómo dividir una cadena en dos y generarlos como dos bloques diferentes?
Hay un componente React -
'función Producto (accesorios) {
const { prod_id: id, prod_name : title, prod_status: status, prod_price: price, prod_oldprice : oldPrice, } = props; let oldPriceChecker = (oldPriceValue) => { if (oldPriceValue) { let oldPriceStr = oldPriceValue + ' zł'; return(oldPriceStr); }else { return(''); } } let statusChecker = (value) => { if (value != undefined){ let string = value; let array = string.split(','); console.log(array); array.map(n => <div className="status">{n}</div>) } } return ( <div className="row"> <div className="card"> <div className="card-image"> <img src="https://via.placeholder.com/150" /> </div> <div className="card-content"> <span className="card-title">{title}</span> <hr className="card_hr" /> <p className="card_price" >{price} zł</p> <div className="card_price old_price">{oldPriceChecker(oldPrice)}</div> {statusChecker(status)} </div> </div> )}
exportar {Producto}
Pregunta: La variable prod_status: status puede contener varios valores (por ejemplo, "nuevo, promoción", si es así, debe dividirla en dos palabras y crear un bloque separado para cada una, ya que ahora el bloque viene con la línea completa
Es necesario así (nuevo, liquidado, etc. en bloques separados)
Intenté crear una función, pero solo genera una matriz en la consola.
Creo que no estoy usando correctamente la propiedad "mapa"
2 answers
Answer question0
El problema:
La función que ha creado statusChecker no devuelve nada. Por lo tanto, cuando desea imprimirlo ( {statusChecker(status)} ) no hace nada.
let statusChecker = (value) => { if (value != undefined){ let string = value; let array = string.split(','); console.log(array); //This is what you want to return but is not returned array.map(n => <div className="status">{n}</div>) } }Solución:
devuelve la matriz asignada de la función.
let statusChecker = (value) => { if (value != undefined){ let string = value; let array = string.split(','); console.log(array); //This is what you want to return but is not returned return array.map(n => <div className="status">{n}</div>) } }0
El principal problema con su código es que está tratando de crear un elemento html simplemente escribiéndolo, y eso no es posible. Lo más parecido a eso es que uses innerHTML . por ejemplo: parent.innerHTML = <div className="status">${n}</div> . siendo "padre" un elemento html creado previamente (document.createEement()) o ya existente en el DOM.
En mi solución, utilicé document.createElement() para crear un div e insertar el texto en él. La función devuelve una matriz con los elementos div y sus respectivas palabras dentro, pero solo eso, no imprime nada en la pantalla. Si todo lo que desea es mostrarlo en la pantalla, el proceso es un poco diferente.
let statusChecker = (value) => { // Instead of doing " if (value != undefined) I used let nodes = value?.split(',').map(n => { // first you have to create an element let div = document.createElement('div') // add the class status div.classList.add('status') // insert each word into the div div.textContent = n; return div }) return nodes } console.log(statusChecker('new,promotion'))