Alex Beyer Alex Beyer - 1 month ago 8
React JSX Question

How to reuse react table

I am trying to make a react component library so I can use them through out my entire application. I have the first part of the library being a table and this is still in the testing stages but I cannot figure out how to call the component and create it on the page its called. Currently this is how its working. I also just starting programming in React yesterday.

HTML

<script type="text/babel" src="/js/reactcomponents/table.js"></script>
<div id="loadboardContainer">
<div class="table-desc">Future Loads</div>
<div id="futureLoadsContainer"></div>

<div class="table-desc">Todays Loads</div>
<div id ="todaysLoadsContainer"></div>

<div class="table-desc">Active Loads</div>
<div id ="activeLoadsContainer"></div>
</div>


Then I have my react component.

var Table = React.createClass({
getInitialState: function() {
return {
results: [],
columns: []
}
},
componentDidMount: function() {
this.serverRequest = $.get(this.props.source, function(result) {
result = JSON.parse(result);

if(result['resultRows'] == undefined){
result['resultRows'] = [];
}

this.setState({
results: result['resultRows'],
columns: $.makeArray(result['resultCols'])
});
}.bind(this));
},
componentWillUnmount: function(){
this.serverRequest.abort();
},
render: function() {
// Set array for rows.
var rows = [];
var header = [];

this.state.columns.map(function(cols) {
header.push(<TableColumns data={cols.cols} key={cols.id} />);
});

this.state.results.map(function(result) {
rows.push(<TableRow data={result.rows} key={result.id} />);
});

// Return the table.
return (
<table className="table table-condensed table-bordered no-bottom-margin">
<thead>
{header}
</thead>
<tbody>
{rows}
</tbody>
</table>
);
}
});

// Set up columns
var TableColumns = React.createClass({
render: function() {
var colNodes = this.props.data.map(function(col, i){
return (
<th key={i}>{col}</th>
);
});
return (
<tr>
{colNodes}
</tr>
);
}
});

// Set up row
var TableRow = React.createClass({
render: function() {
var rowNodes = this.props.data.map(function(row, i){
return (
<td key={i}>{row}</td>
);
});
return (
<tr>
{rowNodes}
</tr>
);
}
});

var futureContainer = document.getElementById('futureLoadsContainer');
var todaysContainer = document.getElementById('todaysLoadsContainer');
var activeContainer = document.getElementById('activeLoadsContainer');

ReactDOM.render(<Table source="/reactloadboard/react/getFutureTableValues.php" />, futureContainer);
ReactDOM.render(<Table source="/reactloadboard/react/getTodaysTableValues.php" />, todaysContainer);
ReactDOM.render(<Table source="/reactloadboard/react/getActiveTableValues.php" />, activeContainer);


And this works when I import the table.js file to the html but I would like it to be more universal in the component usage and remove the

var futureContainer = document.getElementById('futureLoadsContainer');
var todaysContainer = document.getElementById('todaysLoadsContainer');
var activeContainer = document.getElementById('activeLoadsContainer');

ReactDOM.render(<Table source="/reactloadboard/react/getFutureTableValues.php" />, futureContainer);
ReactDOM.render(<Table source="/reactloadboard/react/getTodaysTableValues.php" />, todaysContainer);
ReactDOM.render(<Table source="/reactloadboard/react/getActiveTableValues.php" />, activeContainer);


to be called in the html/php page like the following.

<script type="text/babel" src="/js/reactcomponents/table.js"></script>
<div id="loadboardContainer">
<div class="table-desc">Future Loads</div>
<div id="futureLoadsContainer"></div>

<div class="table-desc">Todays Loads</div>
<div id ="todaysLoadsContainer"></div>

<div class="table-desc">Active Loads</div>
<div id ="activeLoadsContainer"></div>
</div>

var futureContainer = document.getElementById('futureLoadsContainer');
var todaysContainer = document.getElementById('todaysLoadsContainer');
var activeContainer = document.getElementById('activeLoadsContainer');

ReactDOM.render(<Table source="/reactloadboard/react/getFutureTableValues.php" />, futureContainer);
ReactDOM.render(<Table source="/reactloadboard/react/getTodaysTableValues.php" />, todaysContainer);
ReactDOM.render(<Table source="/reactloadboard/react/getActiveTableValues.php" />, activeContainer);


The first way that is working works fine, but if I remove the ReactDom.renders to the html page I am actually putting the component on it says that Component Table doesn't exist. Is there anyway to do this so later on in the application when I have a table all I have to do is import the table.js react component and connect the source and its there? I have looked at other answers on here but they seem to mainly deal with the data for usability.

Answer

In order to use the table component in your HTML you need to export it using module.exports since you are not using ES6 for React.

var Table = React.createClass({
      ...
});
var TableColumns = React.createClass({
...
});

var TableRow = React.createClass({
  ...
});

 //Export the table component
module.exports = Table;
Comments