React, Binding input values

Question

I'm having some problems with binding the value of an input, I have done it on another component of my app and it worked fine, but somehow I can't get it works on another component. I'm only getting the first letter and not the whole text

This is my component

class Post extends Component {

  constructor(props) {
    super(props);
    this.state = {
      post: this.props.data,
      comment: ''
    }
    Post.context = this;
  }
render() {
<input type="text" value={this.state.comment} onChange={this.handleChange} placeholder="Write a comment..." />
      <button className="button comments" onClick={this.handleClick.bind(null,this.state.post.id)}></button>
}
 handleChange(e) {
    Post.context.setState({comment: e.target.value});
}
}

I also tried to use an example from React website but it got the same result:

 render() {
     var valueLink = {
      value: this.state.comment,
      requestChange: this.handleChange
    };
 render() {
    <input type="text" valueLink={valueLink} placeholder="Write a comment..." />
          <button className="button comments" onClick={this.handleClick.bind(null,this.state.post.id)}></button>
    }
     handleChange(newValue) {
        Post.context.setState({comment: newValue});
    }
    }

Does someone have idea, why this is happening?

Answer 1

You must wrap input and button in root element (for example div)., component can have only one root element.

You can use .bind like in my example, and avoid using Post.context = this;

class Post extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      post: this.props.data,
      comment: ''
    };
  }

  render() {
    return <div>
      <input 
        type="text" 
        value={this.state.comment} 
        onChange={ this.handleChange.bind(this) } 
        placeholder="Write a comment..." />

      <button 
        className="button comments" 
        onClick={ this.handleClick.bind(this, this.state.post.id)}>Button</button>
    </div>
    }

  handleClick(postId, e) {
    console.log( postId );
    console.log( this.state.comment );
  }

  handleChange(e) {
    this.setState({ comment: e.target.value });
  }
}

Example

Note: React 16.* contains the new feature - Fragments, which allows skipping additional root element.

render() {
  return (
    <>
      <input 
        type="text" 
        value={this.state.comment} 
        onChange={ this.handleChange.bind(this) } 
        placeholder="Write a comment..."
      />

      <button 
        className="button comments" 
        onClick={ this.handleClick.bind(this, this.state.post.id)}
      >
        Button<
      /button>
    </>
  )
}