Tengo una función React donde tengo un conjunto y quiero actualizar un elemento HTML usando los datos presentes en el conjunto. El siguiente es el ejemplo de código:
const myFunc = (mySet) => { document.getElementById('myId').innerHTML = Array.from(mySet).join(' '); } ... // In the render code: <p id="myId> </p>Esto une correctamente los elementos del conjunto usando un separador de espacios en blanco, pero quiero que se muestre en forma de listas con viñetas o en una nueva línea.
¿Es posible agregar varias líneas usando innerHTML?
Ej: mySet = ('Apple', 'Banana', 'Zanahoria', 'Drumstick')
Salida en mi código: Apple Banana Carrot Drumstick
Salida deseable:
Manzana
Banana
Zanahoria
Palillo de tambor
(o)
Puede lograrlo con una pequeña modificación al join y cambiar el insertAdjacentHTML a innerHTML
const myElement = document.getElementById('myId') myElement.insertAdjacentHTML('afterBegin',Array.from(mySet).join('<br/>')); Pero en mi opinión, no debes manipular DOM directamente con el document que es el antipatrón de React.
Te sugiero que uses estados para actualizar tu componente
const [currentSet, setCurrentSet] = useState([]) const myFunc = (mySet) => { setCurrentSet(mySet); } return <div id="myId">currentSet.map((item) => <p>{item}</p>)</div>Si mySet es una matriz, debe usar React para representar sus elementos:
const myFunc = (mySet) => { return( <ul> {mySet && mySet.map(val=>{return (<li>{val}</li>)})} </ul> ) }Si está utilizando texto interno, puede intentar:
Array.from(mySet).join('\n')Pero si está utilizando innerHtml, intente esto:
Array.from(mySet).join('<br/>')o puede asignar elementos con la etiqueta:
Array.from(mySet).map(function(el) {return '<div>' + el + '</div>';}).join(' ')