Binding data grid to form - reactjs

Question

I have a simple table of data on the left side of my UI and a form on the right. As a brand new user to ReactJS I was able to accomplish this without much difficulty. However, I would like the user to be able to click the Name column from each row and have it populate the form on the right. I have a similar page using jQuery and a small routing library where I simply link each row to a route like #edit/:id and use jQuery to manually bind via the selectors. The reason I am trying out React is to avoid having to do this.
Anywhere here is my code so far. Just a main App component with the form and table in separate components.
var TplList = React.createClass({
getInitialState() {
return {
data: { rows: [] }
};
},
componentDidMount() {
$.ajax({
type: "GET",
dataType: "json",
url: this.props.url,
success: function(response) {
//console.log(response);
this.setState({
data: response
});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render: function() {
var tblRows = this.state.data.rows.map(function(result, index) {
return <TplRow key={index} tpl={result} />
});
return (
<div>
<h3 className="formHeader">Workcell - Master Templates</h3>
<table id="tplDataTable" width="100%" className="form" cellpadding="2" cellspacing="0" border="0">
<thead>
<tr className="titleGreen">
<th>Name</th>
<th>By</th>
<th>Date</th>
<th className="th_right">R/C</th>
<th className="th_right">Copies</th>
<th className="th_right">Vol (10mM)</th>
</tr>
</thead>
<tbody>{tblRows}</tbody>
</table>
</div>
);
}
});
var TplRow = React.createClass({
handleNameClick: function() {
},
render: function() {
var tpl = this.props.tpl;
var cls = (tpl.index % 2 > 0) ? "" : "alt";
var volume = (tpl.volume > 0) ? tpl.volume + "\u00b5" + "l" : "\u00a0";
return (
<tr className={cls}>
<td><a href="#" onClick={handleNameClick}>{tpl.name}</a></td>
<td>{tpl.username}</td>
<td>{tpl.cre_date}</td>
<td>{tpl.compound_placement}</td>
<td>{tpl.copies}</td>
<td>{volume}</td>
</tr>
);
}
});
var TplForm = React.createClass({
getInitialState() {
return {
"copies": 10
};
},
render: function() {
return (
<div>
<h3 className="formHeader">Edit Master Template</h3>
<table className="form" width="100%" cellpadding="3" cellspacing="0">
<tbody>
<tr>
<td className="label"><label htmlFor="tplCopies">Copies</label></td>
<td className="field">
<input
type="number" min="0" max="500"
name="tplCopies"
id="tplCopies"
value={this.state.copies} />
</td>
</tr>
</tbody>
</table>
</div>
);
}
});
var MasterTemplateApp = React.createClass({
render: function() {
return (
<div id="container">
<div id="wc_tpl_left">
<TplList url="/cfc/com_admin_transfer.cfc?method=getWCTemplateData" />
</div>
<div id="wc_tpl_right">
<TplForm />
</div>
<div className="tpl_clear"></div>
</div>
);
}
});
ReactDOM.render(<MasterTemplateApp />, document.getElementById('app_wc_master_tpl'));

Answer 1

you should write your handleNameClick method like this
handleNameClick: function() {
ReactDOM.render(<TplForm />, document.getElementById('wc_tpl_right'))
}
don't forget to remove TplForm from
<div id="wc_tpl_right">
<TplForm />
</div>
hope this helps