ReactComponentCreate

Create React Components

by rahulshivsharan

HTML

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<!-- Body Content -->
			<div id="mainContent"></div>
<!-- Body Content -->

JavaScript

(function(){
				'use strict'
				// custom javaScript content

				var DataFeedComponent = React.createClass({
					propTypes : {
						"defaultValue" : React.PropTypes.string.isRequired
					},
					getDefaultProps : function(){
						return {
							"content" : ""
						}
					},
					getInitialState : function(){
						return {
							"content" : this.props.defaultValue
						}
					},
					doRenderingUI : function(evt){												
						this.setState({
							content : evt.target.value
						});
					},
					render : function(){
						var TextAreaElement = React.createElement("textarea",{
							"className" : "mywidth",
							"value" : this.state.content,
							"onChange" : this.doRenderingUI
						});

						var listElementArray = [];

						var someContent = this.state.content.split(",");

						for(var x = 0; x < someContent.length; x++){
							
							if(someContent[x] !== undefined && someContent[x] !== null && someContent[x] !== ""){
								listElementArray.push(React.createElement("li",null,someContent[x]));	
							}								
							
						} // end of for

						var orderedListingElement =  React.createElement("ol",null,listElementArray);

						var DivElement = React.createElement("div",null,TextAreaElement,orderedListingElement);
						return DivElement;
					}
				});

				

				var elementObject = React.createElement(DataFeedComponent,{ "defaultValue" : "Victor,Nick" });

				ReactDOM.render(elementObject,document.getElementById("mainContent"));
			})();