I have a React function where I am having a set and I want to update an HTML element using the data present in the set. Following is the code example:
const myFunc = (mySet) => {
document.getElementById('myId').innerHTML = Array.from(mySet).join(' ');
}
...
// In the render code:
<p id="myId> </p>
This correctly joins the set elements using a blank space separator, but I want to have it displyed in the form of bulleted lists or in a new line.
Is it possible to have multiline append using innerHTML?
Ex: mySet = ('Apple', 'Banana', 'Carrot', 'Drumstick')
Output on my code: Apple Banana Carrot Drumstick
Output desirable:
Apple
Banana
Carrot
Drumstick
(or)
You can achieve it with a little modification on join and change innerHTML to insertAdjacentHTML
const myElement = document.getElementById('myId')
myElement.insertAdjacentHTML('afterBegin',Array.from(mySet).join('<br/>'));
But in my opinion, you should not manipulate DOM with document directly that is React's anti-pattern.
I'd suggest you use states to update your component
const [currentSet, setCurrentSet] = useState([])
const myFunc = (mySet) => {
setCurrentSet(mySet);
}
return <div id="myId">currentSet.map((item) => <p>{item}</p>)</div>
If mySet is an Array you should use React to render your items:
const myFunc = (mySet) => {
return(
<ul>
{mySet && mySet.map(val=>{return (<li>{val}</li>)})}
</ul>
)
}
If you are using innerText you could try:
Array.from(mySet).join('\n')
But if you are using innerHtml then try this:
Array.from(mySet).join('<br/>')
or you can map items with tag:
Array.from(mySet).map(function(el) {return '<div>' + el + '</div>';}).join(' ')