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
CodePudding user response:
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>
CodePudding user response:
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>
)
}
CodePudding user response:
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(' ')
CodePudding user response:
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>
);
}
CodePudding user response:
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>