₦airaland Forum

[url="https://www.skptricks.com/2018/06/append-or-prepend-html-using-reactjs.html"]Append Or Prepend HTML Using ReactJS[/url]


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.
react Append or prepend to an element

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.

read more : https://www.skptricks.com/2018/06/append-or-prepend-html-using-reactjs.html


https://www.youtube.com/watch?v=bHtZCeWOcr4