Append Or Prepend HTML Using ReactJS

Today, In this tutorial we will see how to Append and Prepend element in react like Jquery. In react we are performing append and prepend operation by maintaining simple Array.
push() - append content in array.
unshift() -  prepend content in array.

Append element in react by using below function :
Appending content in array by using push function and with the help of state we are render the content in browser.

appendData() {
         this.displayData.push(<div  id="display-data"><pre>{this.state.postVal}</pre></div>);
         this.setState({
            showdata : this.displayData,
            postVal : ""
         });
      }

Prepend element in react by using below function :
Prepending content in array by using unshift function and with the help of state we are render the content in browser.

prependData() {
   this.displayData.unshift(<div id="display-data"><pre>{this.state.postVal}</pre></div>);
   this.setState({
      showdata : this.displayData,
      postVal : ""
   });
 }

ReactJs Append and Prepend Element Example

Lets see the below source code, which help you to build more understanding to create append and prepend example using reactjs.

Project Structure :
Lets see the project structure.

Form.js
This is a Form Component, it helps to render textarea box with append and prepend button. Lets see the complete source code.
Here we are storing the textarea content in state when user click on append and prepend button.

this.displayData = [];

      this.state = {
        showdata : this.displayData,
        postVal : ""
      }

1. showdata : Storing the array content in this state and in the array we are storing the textarea content.
2. postVal : Storing the text area value in this state.
3. displayData : Array where we are keeping the textarea content in it,

Lets discuss about the functions :
1. handleChange(e) : This function helps to store textarea detail in state, when user update any content in textarea. (i.e  : postVal : "" )
2. appendData() : This function helps to append the content in array and update the state.
3. prependData() : This function helps to prepend the content in array and update the state.

import React from 'react';
import './style.css';


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>
      );
  }
}


export default Form;

style.css
It consists of style sheet design for Form Component

#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;

}

index.js
This is a main javascript file, which helps to display/render the Form Component. Here we are appending the "Form Component" in div tag whose ID value is "root"

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import Form from './textBox/Form';


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

registerServiceWorker();

Hope you like this append and prepend element example in reactjs :

Demo Link :


Download Link :
https://github.com/skptricks/react/tree/master/Append%20Or%20Prepend%20HTML%20Using%20ReactJS