ecmascript-6 jsx react-rails reactjs

How to change the height of textarea with content?

I am trying to change the height of the textarea as per the content height. I see that the event handler doesn’t change the height since it is getting overwritten by the bootstrap style. Please help!

class PostForm extends React.Component {
this.state = {titleHeight: '30', storyHeight: 1};
this.handleKeyUp = this.handleKeyUp.bind(this);
this.setState({titleHeight: document.getElementById('post_title').scrollHeight});
this.setState({storyHeight: document.getElementById('post_story').scrollHeight});
render () {
var csrfToken = $('meta[name=csrf-token]').attr('content');
return (
<form action='create' method='post' acceptCharset="UTF-8" className= "form-group">
<input type="hidden" name="_method" value="patch"/>
<input type="hidden" name="utf8" value="✓" />
<input type="hidden" name="authenticity_token" value={csrfToken} />
<textarea id="post_title" name="post42. How to change the height of textarea with content?" className="form-control boldText" style={formStyle.textArea} height={this.state.titleHeight} onKeyUp={this.handleKeyUp} placeholder="Title"/>
<textarea id="post_story" name="post[story]" className="form-control" style={formStyle.textArea} height={this.state.storyHeight} onKeyUp={this.handleKeyUp} placeholder="Start telling the story"/>
<input name="commit" type="submit" value="Post" className="btn" style={formStyle.button}/>
const formStyle = {
textArea: {
border: 5,
boxShadow: 'none',
margin: 5,
overflow: 'hidden',
resize: 'none',
ariaHidden: 'true',
button: {
backgroundColor: 'black',
color: 'white',
width: 70,
marginLeft: 18,
marginRight: 5,

The textarea HTML component has no attribute height but an attribute rows that you can use for that purpose (e.g. <textarea rows={Math.round(this.state.storyHeight)} ... />).

No CSS style will override what you pass in the style attribute, it works the opposite way. But there is no height in your formStyle definition anyway.