Read More :<a href="https://www.skptricks.com/2018/06/append-or-prepend-html-using-reactjs.html"> Append Or Prepend HTML Using ReactJS</a>
<div id="root"></div>
<div id="root"></div>
#mainContainer {
width: 500px;
padding: 0px 15px 15px 15px;
border-radius: 5px;
font-family: arial;
line-height: 16px;
color: #333333;
font-size: 14px;
background: #ffffff;
margin: 30px auto;
}
textarea {
padding: 10px;
border: solid 1px #BDC7D8;
}
.button {
background-color: #00BFFF;
border-color: #3ac162;
font-weight: bold;
padding: 12px 15px;
color: #ffffff;
margin-right: 50px;
}
.errorMsg {
color: #cc0000;
margin-bottom: 12px;
}
.sucessMsg {
color: #6B8E23;
margin-bottom: 10px;
}
#display-data{
margin-top:12px;
background: #e5e5e5;
padding:1px;
}
class Form extends React.Component {
constructor() {
super();
this.displayData = [];
this.state = {
showdata : this.displayData,
postVal : ""
}
this.appendData = this.appendData.bind(this);
this.prependData = this.prependData.bind(this);
this.handleChange = this.handleChange.bind(this);
};
appendData() {
this.displayData.push(<div id="display-data"><pre>{this.state.postVal}</pre></div>);
this.setState({
showdata : this.displayData,
postVal : ""
});
}
prependData() {
this.displayData.unshift(<div id="display-data"><pre>{this.state.postVal}</pre></div>);
this.setState({
showdata : this.displayData,
postVal : ""
});
}
handleChange(e) {
let getTextAreaValue = e.target.value;
this.setState({
postVal :getTextAreaValue
});
}
render() {
return (
<div id="mainContainer">
<textarea rows="4" cols="50" value={this.state.postVal} onChange={this.handleChange} ></textarea>
<div >
<input type="submit" className="button" onClick={this.appendData} value="Append"/>
<input type="submit" className="button" onClick={this.prependData} value="Prepend"/>
</div>
<div id="display-data-Container">
{this.displayData}
</div>
</div>
);
}
}
ReactDOM.render(<Form/>, document.getElementById('root'));
View Compiled
This Pen doesn't use any external CSS resources.