Create a multi-line string from a set in React javascript

Question

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)

• Apple
• Banana
• Carrot
• Drumstick

Answer 1

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>

Answer 2

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>
)

} 

Answer 3

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(' ')

Answer 4

innerHTML expects a string therefore you are going to have to construct a string of elements as follows:

const myFunc = (mySet) => {
    const innerHTMLString = Array.from(mySet).map((item) => `<div>${item}</div>`).join('');
    document.getElementById('myId').innerHTML = innerHTMLString;
  }

Then you can test it in the component as follows:

import React from 'react';

export function App(props) {
  const myFunc = (mySet) => {
    const innerHTMLString = Array.from(mySet).map((item) => `<div>${item}</div>`).join('');
    document.getElementById('myId').innerHTML = innerHTMLString;
  }

  return (
    <div className='App'>
      <button onClick={() => myFunc(new Set(['Apple', 'Banana', 'Carrot', 'Drumstick']))>
      <p id="myId> </p>
    </div>
  );
}

Answer 5

You could do a Set.prototype.forEach() too

const mySet = new Set(['Apple', 'Banana', 'Carrot', 'Drumstick']);

let ulElm = '<ul>';
mySet.forEach((value) => ulElm += `<li>${value}</li>`);
ulElm += '</ul>';

document.getElementById('result').innerHTML = ulElm;

<p id="result"></p>