I'm trying to make auto expanding (upwards) text-box with JavaScript in a React application. Got this error. Also tried using window.getElementbyId instead of but that doesn't work.
[![error image][1]][1]
<ReactTextareaAutocomplete
id="textbox"
className="message-input"
placeholder="Type your message.."/>
const tx = document.getElementsByTagName("ReactTextareaAutocomplete");
const maxheight = 100;
const normalheight = window.getComputedStyle(tx[0]).getPropertyValue('height').replace("px", "");
for (let i = 0; i < tx.length; i++) {
tx[i].setAttribute("style", "margin-top:-3px;" + "height:" + (tx[i].scrollHeight > maxheight ? maxheight : tx[i].scrollHeight) + "px;overflow-y:hidden;");
tx[i].addEventListener("input", OnInput, false);
}
function OnInput() {
this.style.marginTop = (normalheight - this.style.height.replace("px", "")) + "px";
this.style.height = "auto";
this.style.height = (this.scrollHeight > maxheight ? maxheight : this.scrollHeight) + "px";
}
[1]: <https://i.stack.imgur.com/1UbRS.png>
Implement useRef() instead to access the element.
Add the ref attribute on the element.
<ReactTextareaAutocomplete ref={rtaRef} />
And for the function:
const tx = useRef(null);
If you have multiple instances of the component, use the loop to create unique ref using the loop index.