Develop Reference

creating elements in React

I don't understand how elements are created in React.
I have some code below where the goal is to create elements on a form submit using a value from a refs - so for every submit in a form, it creates a new <h1> tag with the content of the textbox inside of it. A sample of what I'm trying to do looks like:
...
addHeader(e) {
e.preventDefault();
const newHeader = this.refs.post.value;
var newpost = React.createElement("h1", {
type: "text",
value: newHeader
});
}
...
render() {
return (
<div className="form-section">
{ newPost }
<form onSubmit={this.addHeader.bind(this)}>
<input id="input-post" type="text" placeholder="Post Here" ref="post" />
<input type="submit" value="Submit" />
</form>
<button className="form-section__submit" onClick={this.clearFields.bind(this)}>Clear All</button>
</div>
);
}
Basically my thinking is in my addHeader() function I'm assigning a variable of newPost to the method and calling it within my component. This code is causing 2 errors:
33:9 warning 'newpost' is assigned a value but never used no-unused-vars
49:13 error 'newPost' is not defined no-undef
What I don't understand, is (from what I can see) I am assigning a value to that variable and also using it in the component that I am rendering... along with that, I don't understand this error message. How can something be assigned a value but be undefined at the same time...? Is it because it's in the wrong scope? How do I declare where the new element is rendered specifically in the component?
I read the documentation but it doesn't give a clear answer as to how to control where in the component the new element is rendered.

Made some changes to your code. You're going to want to initialize component state in your constructor. In your addHeader method you will use this.setState to update the state of the component with a new posts value including the value of this.input. I changed your ref on the input an actual ref. You take the element and store on this. Every time you add a new post you will get a new <h1> with the value of the textarea.
...
addHeader(e) {
e.preventDefault();
this.setState((prevState, props) => {
return { posts: [ ...prevState.posts, this.input.value ] };
});
}
...
render() {
const { posts } = this.state;
return (
<div className="form-section">
{ posts.map( text => <h1>{ text }</h1> ) }
<form onSubmit={this.addHeader.bind(this)}>
<input id="input-post" type="text" placeholder="Post Here" ref={ el => this.input = ref } />
<input type="submit" value="Submit" />
</form>
<button className="form-section__submit" onClick={this.clearFields.bind(this)}>Clear All</button>
</div>
);
}
As an aside: Binding functions in the render method of react components will cause a performance hit. There is no need to re-bind the this context of the function on every render. this.clearFields.bind(this) should become this.clearFields and you will need to add this.clearFields = this.clearFields.bind(this) to your constructor. You do not need to bind functions that are not used as callbacks.
You're going to want to do the same thing for this.addHeader.bind(this).

Loop with React?

Using React, I am implementing Dexie.js for this example. However, I don't believe this to be particularly important. I would like to know how to execute a loop of the objects in my IndexDB database using React.
As shown in my code below, dayta holds my database, and stores friends with name and age values. When my function carveit is run, it takes what users have typed in and places that value on {this.state.etv}. The code works.
However, I do not know how to have {this.state.etv} show ALL entries. As is, it only shows the most recent addition. I understand I would have to execute some kind of loop, and use the map function, but I am unsure how to go about that.
var React = require('react');
module.exports = React.createClass({
getInitialState: function(){
return { etv:'' }
},
carveit:function(){
var enteringtitle = document.getElementById('entertitle').value;
var enteringmessage = document.getElementById('enterentry').value;
var dayta = new Dexie('testcase');
dayta.version(1).stores({
friends:'name, age'
});
dayta.open().catch(function(error){
alert("Oh no son: " +error);
});
dayta.friends.add({
name: enteringtitle,
age: enteringmessage
});
dayta.friends.each((friend)=>{
this.setState({etv: friend.name});
});
},
functionrun:function(){
return (<div>
<ul>
<li>{this.state.etv}</li>
</ul>
<p>Entry Title</p>
<input id="entertitle" type="text" className="form-control"/>
<p>Your Entry</p>
<textarea id="enterentry" className="form-control"></textarea>
<input id="entrytitle" type="submit" value="Publish" onClick={this.carveit} />
</div>);
},
render:function(){
if (this.props.contentadd){
return this.functionrun();
}
else {
return null;
}
}
});

You can perform the loop separately and have it return jsx. You can then use the return value in your template since arrays of jsx partials are supported.
render: function() {
var itemElements = this.state.items.map(function(item, i) {
return (
<li>{item}</li>
);
});
return (
<ul>
{itemElements}
</ul>
);
}

Facing issue with knockout binding

I am having multiple tabs(A,B,C) and on load of 'C' tab,the model properties should data-bind to tab 'c'.
I am facing issue with data-bind.
The three tabs(A,B,C) are inside another view View A.
Here is my VIEW A
<div id="tabMain" style="width:1230px;height:auto;overflow:auto;">
<ul>
<li>A</li>
<li>B</li>
<li data-bind="click:loProvision">C
Here is my Tab 'c'
<div id="SubC">
<ul>
<li>tabc1</li>
</ul>
<div id="tabC1" style="overflow:auto;">
<div>
#Html.HiddenFor(m => m.UID)
<div style="width:500px;height:20px;margin-left:30px">
<div >#Html.NCheckBoxFor(m => m.EnablePD, new { id = "cbPD", style = "vertical-align:middle;", data_bind = "checked:enablePD" }, Model.IsReadOnly)</div>
<div >
<label for="cbOrgDetailsPD">#Res.OrganizationStrings.Ect</label>
</div>
</div>
<div style="width:100%;margin-top:10px;margin-left:30px">
<div style="width:22%;">
<label for="ddPD">Strings.PlaceUsersInGroup</label>
</div>
<div style="width:45%">#Html.NDropDownListFor(m => m.PD, Model.groups, new { id = "ddPD", style = "width:270px;height:25px;vertical-align:middle;", , data_bind = "enable: enablePD"
}, Model.IsReadOnly)</div>
</div>
<div style="margin-top:20px;margin-left:30px">
<div >#Html.NCheckBoxFor(m => m.ProType, new { id = "cbType", style = "vertical-align:middle;", data_bind = "checked:enableing" }, Model.IsReadOnly)</div>
<div >
<label for="cbByType">#Res.Strings.Enableing</label>
</div>
</div>
</div>
</div>
The View which containing the tabs is having the viewmodel and i want to bind the tab 'c' components when the tab 'c' loaded.
Here is my Javascript code:
function Intialize {
var model = new MainviewModel();
ko.applyBindings(model, document.getElementById(orgDetailsTab.getId()));
}
function MainviewModel() {
this.loadvision = function() {
if (isvisionsLoaded === false) {
var autoUrl = '/Org/OrgView?UID=' + UID + '&isReadOnly=' + isReadOnly;
loadvision();
}
};
}
var CAPDModel;
function loadvision() {
try {
$('#C').empty();
$.ajaxSetup({
cache: false
});
$('#C').load(visionUrl, function(responseText, textStatus, XMLHttpRequest) {
$("#SubC").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
isLoaded = true;
CModel = new organizationViewModel();
ko.applyBindings(CModel, document.getElementById(tabC1));
function orgViewModel() {
this.enablePD = ko.observable($('#cbOrgPD').is(':checked'));
this.enableCing = ko.observable($('#cbType').is(':checked'));
this.enableLicense = ko.observable($('#cbOrgDetailsLicenses').is(':checked'));
this.cansee = ko.observable(false);
this.canRemove = ko.observable(false);
}
}
I am getting exception at
ko.applyBindings(CModel, document.getElementById(tabC1));
My requirement is on the load of Tab 'tabC1' the html attributes should be data-binded ( disabling and enabling of html fields )should happen.
I intially placed the CAPD related properties in 'MainviewModel' but the binding is not happening.
So i moved the C propeties from 'MainviewModel' to 'tabC1' load fucntion,but still the data-bind is not happening.
So i created a new viewmodel inside the 'tabC1' div load fucntion and trying to apply bindings on the load of div 'tabC1'.
Can some one guide if the approach is wrong or let me know how can i acheive it.
Here is the error details i am facing at
ko.applyBindings(CModel, document.getElementById(tabC1));
Unhandled exception at line 26076, column 17 in eval code
0x800a139e - JavaScript runtime error: Unable to parse bindings.
Message: ReferenceError: 'loadvision' is undefined;
Bindings value: click:loadvision

I found the solution for the above issue,
I changed the line
ko.applyBindings(CAPDModel, document.getElementById(tabC1)); changed to
ko.applyBindings(CAPDModel, $("#tabC1")[0]);

Adding/removing input fields

I'm pretty new to ReactJS, I'm liking it a lot, but there are some things like binding that seems to be easier in Angular.
I want to have a form, where a user can click a button to add extra input fields. At any point, they can also "delete" an input field.
On the submit, I want to get these inputs as an array, i.e. pass dynamicInputs to my API which contains an array of name.
This is what I've done (which is probably wrong since I'm treating React like Angular):
var React = require('react');
module.exports = React.createClass({
addInputField: function(e) {
e.preventDefault();
var inputs = this.state.inputs;
inputs.push({name: null});
this.setState({inputs : inputs});
},
removeInputField: function(index) {
var inputs = this.state.inputs;
inputs.splice(index, 1);
this.setState({inputs : inputs});
},
handleSubmit: function (e) {
e.preventDefault();
// What do I do here?
},
getInitialState: function() {
return {inputs : []};
},
render: function (){
var inputs = this.state.inputs;
return (
// Setting up the form
// Blah blah
<div className="form-group">
<label className="col-sm-3 control-label">Dynamic Inputs</label>
<div className="col-sm-4">
{inputs.map(function (input, index) {
var ref = "input_" + index;
return (
<div className="input-group">
<input type="text" className="form-control margin-bottom-12px" placeholder="Enter guid" value={input.name} ref={ref} aria-describedby={ref} />
<span className="input-group-addon" onClick={this.removeInputField.bind(this, index)} id={ref} ><i className="fa fa-times"></i></span>
</div>
)
}.bind(this))}
<button className="btn btn-success btn-block" onClick={this.addInputField}>Add Input</button>
</div>
</div>
);
}
});
Right now removeInputField does NOT work! It just removes the last entry all the time.

Every <div className="input-group"> must have a unique key
<div className="input-group" key={index}>
That's how React distinguishes between collection of rendered nodes.
References:
https://facebook.github.io/react/docs/multiple-components.html#dynamic-children
UPD:
As #WiredPrairie mentioned below in the comments - the suggested solution is far from ideal, since the index is not unique enough. And instead you need to create another array with some unique identifiers (a monotonously growing sequence would be enough) and maintain it in parallel with this.state.inputs and use its values as keys.
So, on adding an element you:
this.keys.push(++this.counter);
on removing - remove from both by the same index. And in the .map you
<div className="input-group" key={this.keys[index]}>

What is workflow of the React

The code below is from React, which updates the DOM dynamically. I used the tutorial by Facebook react but did not understand the whole code, i.e which part of the code executes when and how it triggers the rest of the parts in the code. Please kindly help me in understanding the code.
var TodoList = React.createClass({
render: function() {
var createItem = function(itemText) {
return <li>{itemText}</li>;
};
return <ul>{this.props.items.map(createItem)}</ul>;
}
});
var TodoApp = React.createClass({
getInitialState: function() {
return {items: [], text: ''};
},
onChange: function(e) {
this.setState({text: e.target.value});
},
handleSubmit: function(e) {
e.preventDefault();
var nextItems = this.state.items.concat([this.state.text]);
var nextText = '';
this.setState({items: nextItems, text: nextText});
},
render: function() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<input onChange={this.onChange} value={this.state.text} />
<button>{'Add #' + (this.state.items.length + 1)}</button>
</form>
</div>
);
}
});
React.renderComponent(<TodoApp />, mountNode);
The above code is used to dynamically update the DOM structure. This code is referred from http://facebook.github.io/react/ so please help in knowing the work process of the code.

Thanks, that's a very good question. Here's a rough overview of what is happening behind the scenes:
Initialization
It all starts with this line:
React.renderComponent(<TodoApp />, mountNode);
This instantiate the TodoApp component which calls:
TodoApp::getInitialState()
then, it renders the TodoApp component
TodoApp::render()
which in turns instantiate a TodoList
TodoList::render()
At this point, we have everything we need in order to render the initial markup
<div>
<h3>TODO</h3>
<ul></ul> <!-- <TodoList> -->
<form>
<input value="" />
<button>Add #1</button>
</form>
</div>
It is stringified and added inside of mountNode via innerHTML
OnChange
Then let's say you're going to enter some text in the input, then
TodoApp::onChange
is going to be called, which is going to call
TodoApp::setState
and in turn will call
TodoApp::render
again and generate the updated DOM
<div>
<h3>TODO</h3>
<ul></ul> <!-- <TodoList> -->
<form>
<input value="sometext" />
<button>Add #1</button>
</form>
</div>
What's happening at this point is that React is going to do a diff between the previous DOM and the current one.
<div>
<input
- value=""
+ value="sometext"
Only the value of the input changed, so React is going to just update this particular attribute in the real DOM.

You can find more general explanation on React official page.
Generally the react lifecycle can be described by the following stages (which can repeat multiple times once the components is created):
Initializing values (only once):
constructor(){ ... }
Mounting, if you need to add something after initial rendering (only once):
componentDidMount(){...}
Re-rendering functions, variables and components
myArrowFunction = () => {
...
this.setState({...})
...
}
Updating:
componentDidUpdate()}{...}
shouldComponentUpdate(){...}
Unmounting:
componentWillUnmount(){...}
Rendering happens here
render(){...}