JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div id="root"></div>

CSS

.mt15 {margin-top:15px;}
.ml10 {margin-left:10px;}
.p10 {padding: 10px;}
.garybg {background-color:#ccc;}

React

class Form extends React.Component {

  constructor() {
    super();
    this.displayData = [];
    this.state = {
      showdata : this.displayData,
      postVal : ""
    }
    this.prependData = this.prependData.bind(this);    
    this.handleChange = this.handleChange.bind(this);
  };   

  prependData() {
    this.displayData.unshift(<div className="garybg p10 mt15">{this.state.postVal}</div>);
    this.setState({
      showdata : this.displayData,
      postVal : ""
    });
  }

  handleChange(event) {
    let getTextAreaValue = event.target.value;
    this.setState({ postVal :getTextAreaValue });
  }

  render() {
    return (
      <div className="container">
        <div className="col-md-12 col-sm-12 col-xs-12 mt15">
          {this.displayData}
        </div>
        <div className="col-md-12 col-sm-12 col-xs-12 mt15">
          <input type="text" className="form-control" value={this.state.postVal} onChange={this.handleChange} />
        </div>
        <div className="col-md-12 col-sm-12 col-xs-12 mt15">
          <button className="btn" onClick={this.prependData}>Prepend</button>          
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Form/>, document.getElementById('root'));