I am new to react and facing some issues with a table display.
When I am trying to render data using State entire string value gets rendered, instead of an actual table.
A small snippet of data displayed in the browser:
But when I copy-paste the data from the screen to the render() method, the table gets displayed properly.
The current render method-
render() {
this.setValueForState();
return (
<div>
<table>
<thead>
<tr>
{this.state.Header}
</tr>
</thead>
<tbody>
{this.state.Detail}
</tbody>
</table>
</div>
);
}
I get the following error in the console. I have made sure that there are no BLANK spaces in the data.
index.js:1 Warning: validateDOMNesting(...): Text nodes cannot appear as a child of <tr>.
Warning: validateDOMNesting(...): Text nodes cannot appear as a child of <tbody>.
I looked up this error online for the above error and removed all Blank spaces from the result string.
Not sure what am I doing wrong.
this.state.Header and this.state.Detail are strings, which are getting rendered as text nodes.
As the error message states, you can not put text nodes inside <tr> or <tbody> tags as you have done.
HTML tables need the text nodes to be inside <td> tags.
See below for valid table markup.
<div>
<table>
<thead>
<tr>
<td>{this.state.Header}</td>
</tr>
</thead>
<tbody>
<tr>
<td>{this.state.Detail}</td>
</tr>
</tbody>
</table>
</div>
Please remove some whitespace. you can try with below
<tr key={id}>{this.state.Header}</tr>;
Related
I am trying to nest ng-repeat but looks like I am not doing it correctly.
I need all the lineItem in the json to be displayed.
Since, json value I am trying to display is a 3rd level array, I tried nested
ng-repeat but does not work.
<table border="1" width="100%">
<tr>
<th>Id</th>
<th>materialNumber</th>
<th>quantity</th>
</tr>
<tbody ng-repeat="subConfig in values.subConfigs.subConfig">
<tr ng-repeat="lineItem in subConfig.lineItems.lineItem">
<td>{{lineItem.lineItemId}}</td>
<td>{{lineItem.materialNumber}}</td>
<td>{{lineItem.quantity}}</td>
</tr>
</tbody>
</table>
here is jsfiddle I tried:
Your json was not in correct format values should not be array also you need to change ng-repeat="s in values.subConfigs.subConfig"> to ng-repeat="s in values.configBOM.subConfigs.subConfig">
Something like
<tbody ng-repeat="s in values.configBOM.subConfigs.subConfig">
<tr ng-repeat="lineItem in s.lineItems.lineItem">
<td>{{lineItem.lineItemId}}</td>
<td>{{lineItem.materialNumber}}</td>
<td>{{lineItem.quantity}}</td>
</tr>
</tbody>
Here is working fiddle
Its a very minor mistake :
Please change your json to an object instead of an array , the format you have given is wrong .
So it should be :
$scope.values={} //whatever you want to write inside
instead of:
$scope.value=[];
Secondly while you are doing ng-repeat you have to change this line :
<tbody ng-repeat="subConfig in values.subConfigs.subConfig">
to :
<tbody ng-repeat="subConfig in values.configBOM.subConfigs.subConfig">
I am using a duo of ng-repeat's to create a matrix table, but after updating the data the coloring function (a simple return 'green' if the argument is above 0) stops working.
When I load the first (fake) data the colors work just fine, but after any updates it stops working. When initializing the 2d array it will always load and display properly. I have found no debug errors or problem with the logic.
Jfiddle
UPDATE**: I created a simple function that changes a few values in the 'original' 2D-array and I still face the problem with it not updating colors. I am pretty positive this is an AngularJS problem (shortcoming?) and not an issue with the data itself.
HTML
<!-- MATRIX TABLE -->
<div class="center w80" >
<div id = "MatrixTable2">
<table border="1">
<thead>
<tr>
<th></th> <!-- blank -->
<th ng-repeat="ppp in PlayerIDList">{{ppp.name}}</th>
</tr>
</thead>
<tbody>
<tr width="50px" ng-repeat="row in Matrix" >
<td class="rowlabel">{{PlayerIDList[$index].name}}</td>
<td width="50px" ng-repeat="col in row track by $index" ng-class="::funcGetColorByBool({{col}})">{{col}}</td>
</tr>
</tbody>
</table>
</div>
<!-- END MATRIX TABLE -->
I believe your problem is the class binding, the :: prefix means this expression is only evaluated once.
"::funcGetColorByBool({{col}})"
Also, you need to fix your expression to pass in the value of col:
from:
ng-class="::funcGetColorByBool({{col}})"
to:
ng-class="funcGetColorByBool(col)"
Here is a working plunker.
I have used ng-repeat numerous times already in the past, but for some reason I cannot yet understand why it is not on the following situation:
I have an array of objects called registers which I am referencing on the ng-repeat but nothing happens.
I know the array is populated because I have seen it on numerous console.log and because it works if I move the ng-repeat over to the <tbody>
<div ng-repeat = "r in registers">
<!-- START HEADER -->
<tbody class="js-table-sections-header">
<tr>
<td class="text-center">
<i class="fa fa-angle-right"></i>
</td>
<td class="font-w600">Denise Watson</td>
</tr>
</tbody> <!-- END HEADER -->
<tbody>
<tr>
<td class="text-center"></td>
<td>
<!-- Summernote Container -->
<div class="js-summernote-air">
<p>End of air-mode area!</p>
</div>
</td>
</tr>
</tbody>
<!-- END TABLE -->
</div>
I was hoping someone could tell me if there is something I may be ignoring.
Thanks in advance.
I think I just ran into this same problem. It stems from <div> not being a valid elment within a <table>.
I'm guessing that since you have <tbody> there, that there is a <table> tag that was left out of your snippet. <div>s aren't allowed in a table, so the browser moves it before the table. In my situation, doing this, causes the angular scope to change so that there was nothing to iterate over. You can verify this by using the developer tools of your browser.
So, my guess is that you probably want to move the ng-repeat onto the <tbody> or <table> tag.
If you want to use ng-repeat in "div" tag means use "span"
inside div tag. instead of using "table" and its sub attributes..
else use your ng-repeat inside "table" or "thead" or "tr" also
it will iterate rows ...
than only ng-repeat will works.
I am very new to ReactJS and playing around to learn its tricks of the trade. I am trying to create a simple table with thead and tbody.
my code looks as below:
/**
* creates a HTML table to show requirements
**/
var ReqTable = React.createClass({
render: function() {
var rows = [];
rows = this.props.data.map(function(row) {
return ( <ReqRow row={row} />);
});
return(
<table className="reqTable table table-bordered table-striped">
<thead>
<tr>
<th>REQ #</th>
<th>Short Desc</th>
<th>Long Description</th>
</tr>
</thead>
<tbody> {rows} </tbody>
</table>
);
}
});
I am using ajax call to get the rows and render this table. This works fine overall, but gives a warning in the browser console, indicating that you cannot add a span inside a tbody.
I am sure I am not adding a span. But what I believe is that when there are no rows (when render is first time called), it seems reactJS is trying to render a span inside the tbody.
So, should I put an if check here to avoid rendering a span? Finally what is the correct way to render a empty set of rows in tbody?
Your issue is that you have space characters as children of your tbody element, before and after your rows array:
<tbody> {rows} </tbody>
Compiles to:
React.createElement("tbody", null, " ", rows, " ");
Because of DOM limitations, when a DOM component has more than one child, React wraps all its text children within <span> elements. So the above JSX is equivalent to:
<tbody><span> </span>{rows}<span> </span></tbody>
To fix this, just remove the extraneous characters:
<tbody>{rows}</tbody>
In my cshtml view I have the following table:
<table>
<thead>
<tr><th>Test</th></tr>
</thead>
<tbody>
<tr ng-repeat="label in labels">
<td>{{label.id}}</td>
</tr>
</tbody>
And when I view the page and inspect the table element in my browser only the table headings are displayed and no rows. Applying ng-repeat seems to comment out the rows automatically as below:
<table class="ng-scope">
<thead>
<tr><th>Test</th></tr>
</thead>
<tbody>
<!-- ngRepeat: label in labels -->
</tbody>
</table>
when I remove ng-repeat="label in labels" and apply a static value in the row cell the row is not commented and displays just fine.
Does anyone knows what could be causing this behaviour?
Upon compilation angular automatically adds the ngRepeat comment to the HTML, in order to indicate that below this comment, the repeated elements will be displayed.
The reason why your tbody doesn't contain any rows, is because your $scope.labels object is empty.