Put inside Textarea button with Jsx (react) - reactjs

Question

Okey small question from junior to pro about Jsx and react:
I have textarea and i wanna put inside button
renderButton() {
const { mod } = this.state
return (
<button className={classNames({
[styles.button]: mod == 'default',
[styles.fullScreenButton]: mod == 'fullscreen'
})} onClick={this.fullScreen} >
{this.renderIcon()}
</button>
)
}
render() {
const { text, rows } = this.props
const { mod } = this.state
return (
<div>
<textarea rows={rows} value='text'
className={classNames({
[styles.textArea]: mod == 'default',
[styles.fullScreen]: mod == 'fullscreen'
})}>
</textarea>
{this.renderButton()}
</div>
)
}
}
How i can do that?
Just
<textarea> <button> </button> </textarea>
not working
Using position: absolute maybe yes, but have any another way to do that?

Answer 1

As you have discovered, placing an HTML button as a child of a <textarea> will not work. This is not a limitation of React or JSX but of the <textarea> element. If you want the button to be placed inside the <textarea> visually you'll need to use CSS to reposition it. Something like this:
div {
position: relative;
}
textarea {
width: 100%;
height: 300px;
margin: 0;
padding: 0;
}
button {
position: absolute;
bottom: 15px;
right: 10px;
}
<div>
<textarea>
</textarea>
<button>Submit</button>
</div>