according my code bellow how to correct way to append string outside loop when using map() method
this is my incorrect way when I try to concate <table><th>Emploeye Name</th><th>Salary</th></table> tag before and after call map() method
buildString(data){
return(//start return
<table class="table">
<th>Emploeye Name</th><th>Salary</th>
data.map((employeye) =>
<tr>
<td>{employeye.employee_name}</td>
<td>{employeye.employee_salary}</td>
</tr>
)
</table>
); //end return
}
for this mistake I get this message
./src/views/emploeyes/Employeyes.js
Line 27:20: 'employeye' is not defined no-undef
Line 28:20: 'employeye' is not defined no-undef
and this is correct way without concate anything before map() method
buildString(data){
return(
data.map((employeye) =>
<tr>
<td>{employeye.employee_name}</td>
<td>{employeye.employee_salary}</td>
</tr>
)
);
}
please helpme to fix that and explain me thank you.
According to the JSX, you must use {} on your code
buildString(data){
return(//start return
<table className="table">
<thead>
<th>Emploeye Name</th>
<th>Salary</th>
</thead>
<tbody>
{
data.map((employeye) => (
<tr>
<td>{employeye.employee_name}</td>
<td>{employeye.employee_salary}</td>
</tr>
))
}
</tbody>
</table>
);
}
Related
I have been struggling with a problem.
I have multidimensional array and i want to display it to table body.
so i tried to do it with map, however i can't ignore the top of map element, so it displays like nest data.
this is how the multidimensioanl array looks
['2022-05-04', '2022-05-04', '2022-05-04', '2022-05-04', '2022-05-04', '2022-05-04']
['10:11:52', '10:11:52', '10:11:53', '10:11:54', '10:11:55', '10:11:56']
['447', '442', '447', '442', '436', '433']
so i tried to let it looks easy like below.
<tbody>
<tr>
<td>{list[0][0]}</td>
<td>{list[1][0]}</td>
<td>{list[2][0]}</td>
</tr>
<tr>
<td>{list[0][1]}</td>
<td>{list[1][1]}</td>
<td>{list[2][1]}</td>
</tr>
<tr>
<td>{list[0][2]}</td>
<td>{list[1][2]}</td>
<td>{list[2][2]}</td>
</tr>
<tr>
<td>{list[0][3]}</td>
<td>{list[1][3]}</td>
<td>{list[2][3]}</td>
</tr>
<tr>
<td>{list[0][4]}</td>
<td>{list[1][4]}</td>
<td>{list[2][4]}</td>
</tr>
</tbody>
so i tried to use map instead of doing this
const tableData = list.map((data, index) =>
data.map((item, idx) => (
<tr>
<td>{listData[idx]}</td>
</tr>
))
);
return(
<tbody>
{tableData}
</tbody>
)
it doesn't look what i expected.
how can i solve this problem ??
"tr" tag length should be longest
but "td" tag length should be the multidimensioanl array length.
The data, as-is, isn't really suited to .map because you need to iterate over the list[x][y]s, where the x changes, but not the y. Turn the list into a structure where mapping will work first by essentially turning the multidimensional array on its side.
const tableData = list[0].map(
(_, i) => (
<tr>
{
list.map(
listItem => <td>{listItem[i]}</td>
)
}
</tr>
)
);
return (
<tbody>
{tableData}
</tbody>
)
Using React Bootstrap table, I'm getting the warning Warning: Each child in a list should have a unique "key" prop. I've read about how this is necessary for lists, but not sure where I'm supposed to set a key for a Table? My table looks something like this
<Table size="sm" responsive="sm" bordered hover striped>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
</tr>
</thead>
<tbody>
{ histories.map((h) => (
<tr>
<th>{ h.col1} </th>
<th> { h.col2}</th>
<th> { h.col3}</th>
<th>{ h.col4}</th>
</tr>
)) }
</tbody>
</Table>
This would work is there's an id for histories.
{ histories.map((h) => (
<tr key={h.id}>
<th>{ h.col1} </th>
<th> { h.col2}</th>
<th> { h.col3}</th>
<th>{ h.col4}</th>
</tr>
)) }
The key can really be anything (even h.col1 if you like), as long as it's unique within that list. It's not super important to have (hence the warning instead of error), but it's definitely is good practice when you're iterating over some data and rendering a list from it, in order to prevent some unpredictable behavior, and to help React do its thing properly.
I'm learning React and this is the way my tutorial says to bind, say, a table to a javascript array of Article objects:
<table>
<tbody>
{
articles.map(a =>
{
return <tr>
<td>
{a.property1}
</td>
<td>
{a.property2}
</td>
</tr>
})
}
</tbody>
</table>
I had been using knockout js, which supports a syntax that seems much more natural for this, in that it doesn't have all the curly braces and parentheses, which makes it much easier to see the structure of the HTML that you're trying to produce:
<table>
<tbody>
<tr data-bind="foreach: a in articles">
<td>
{a.property1}
</td>
<td>
{a.property2}
</td>
</tr>
</tbody>
</table>
Does React have a similar declarative style syntax?
JSX is just syntax sugar for JavaScript. This:
<tbody>
{
articles.map(a =>
{
return <tr> ...
gets transpiled to:
React.createElement('tbody', null,
articles.map(a => {
return React.createElement('tr', null,
// <td> elements
)
})
)
The brackets {} are needed in the JSX when interpolating a JavaScript expression into JSX, to indicate that what followed should be parsed as JavaScript rather than as JSX's HTML-like markup - that is, there's no way around the { in
<tbody>
{
articles.map(
in order to interpolate the articles into the <tbody>.
The best you'll be able to do is remove the { and return and use the arrow function's concise return in the .map callback:
<table>
<tbody>
{
articles.map(a => <tr>
<td>
{a.property1}
</td>
<td>
{a.property2}
</td>
</tr>
)
}
</tbody>
</table>
One of the arguable main benefits of React (for new learners who already know JS) is that it's just JavaScript, other than a few additional syntax rules about JSX. So there's no special syntax like foreach: a in articles - instead, the ordinary JavaScript logic for looping over an array is used, articles.map(a =>.
In the given code snippet I dont want to render the component if the heading is equal to _id but the following conditional rendering results in no rendering at all (empty table). What conditional statement should I use?
return <table className='paleBlueRows' cellPadding= {11} cellSpacing={11}>
<thead>
<tr>{data[0] && columns.map((heading) => {
if(heading!=='_id') <th>{heading}</th>
})}</tr> .....
You can use Array.filter() to filter out the heading before mapping, or you can return null or false which React will ignore. Note that returning undefined (which is the same as not returning anything from a function) is not valid, and will cause React to emit a warning.
So, either:
return (
<table className="paleBlueRows" cellPadding={11} cellSpacing={11}>
<thead>
<tr>
{data[0] &&
columns
.filter((heading) => heading !== "_id")
.map((heading) => {
return <th>{heading}</th>;
})}
</tr>
</thead>
</table>
);
Or:
return (
<table className="paleBlueRows" cellPadding={11} cellSpacing={11}>
<thead>
<tr>
{data[0] &&
columns
.filter((heading) => heading !== "_id")
.map((heading) => {
if (heading === "_id") return null;
return <th>{heading}</th>;
})}
</tr>
</thead>
</table>
);
Since you're rendering a list (with .map()), make sure you set the key of the element which you return from it. I don't know if columns can contain duplicate values, or anything else about its nature, so I can't make a precise suggestion. If columns contains no duplicate values, just set its value as the key so React knows which elements it needs to update if columns changes between renders.
return (
<table className="paleBlueRows" cellPadding={11} cellSpacing={11}>
<thead>
<tr>
{data[0] &&
columns
.filter((heading) => heading !== "_id")
.map((heading) => {
return <th key={heading}>{heading}</th>;
})}
</tr>
</thead>
</table>
);
I have a HTML Table in my ReactJS app and I want to color specific cells or rows there. I have my array in state and want to check differences between neighbor rows and then show this differencies by coloring them on red.
class MainTable extends Component {
constructor(props) {
super(props);
this.state = {
results: []
};
}
render() {
const sorted = _.sortBy(this.state.results, ['ORIGIN', 'DATASTAMP']);
return (
<div>
<div>
<Table hover striped bordered responsive size="sm">
<thead>
<tr>
<th>VERSION</th>
<th>DATE</th>
<th>ORIGIN</th>
</tr>
</thead>
<tbody>
{sorted.map(result =>
<tr>
<td>{result.VERSION}</td>
<td>{result.DATASTAMP}</td>
<td>{result.ORIGIN}</td>
</tr>
)}
</tbody>
</Table>
</div>
</div>
);
}
}
I have no idea how to do something like that. Maybe some idea? Sorry for noobie question, I'm new with ReactJS.
To mark some rows you can:
{sorted.map((result, index) =>
<tr className={`item-${index}`}>
<td>{result.VERSION}</td>
<td>{result.DATASTAMP}</td>
<td>{result.ORIGIN}</td>
</tr>
)}
Basically you first need some criteria on which to mark your element, than you can apply a class or style to it. Helpful is classnames so you could do something like that:
{sorted.map((result, index) =>
<tr className={classnames({
even: index % 2 == 0,
odd: !(index % 2 == 0)
})}>
That would add either even or odd to the classes of the <row>, depending on the index in the list.
I guess there are only two things to remember are:
element styles need to objects like: { backgroundColor: #000 } and
css classes need to be added as »className« property
You can use something like
<tr style={{'background-color': result.color}}>...</tr>
or
<tr style={{'background-color': shouldHighlight[key] ? 'red' : 'white'}}>...</tr>
Obviously in second case you need to findout before function, which table rows should be highlighted and store it in the array.
Also, you need to write your map function in format (result, key) => ... or you need to know id of the result.
You can add a flag in each element of your array to indicate if you need to set the background color of your cell or not.
And then use it like this in your render method :
render() {
const sorted = _.sortBy(this.state.results, ['ORIGIN', 'DATASTAMP']);
return (
<div>
<div>
<Table hover striped bordered responsive size="sm">
<thead>
<tr>
<th>VERSION</th>
<th>DATE</th>
<th>ORIGIN</th>
</tr>
</thead>
<tbody>
{sorted.map(result =>
<tr className={(result.colorFlag ? 'colored-background' : '')}>
<td>{result.VERSION}</td>
<td>{result.DATASTAMP}</td>
<td>{result.ORIGIN}</td>
</tr>
)}
</tbody>
</Table>
</div>
</div>
);
And of course, don't forget to create the CSS class
.colored-background {
background-color: #BADA55;
}