let favorites=[];
var myObj = {
"username" : username,
"problems" : solved
};
//push the object to your array
favorites.push( myObj );
I am pushing the response from an Axios API into an array. How to display the information in ReactJS in the form of table.
Simple map function returning each row of the body:
<table>
<thead>
<tr>
<th>Username</th>
<th> Problems</th>
</tr>
</thead>
<tbody>
{favourites.map((fav) => {
return (
<tr>
<td>{fav.username}</td>
<td>{fav.problems}</td>
</tr>
);
})}
</tbody>
</table>;
Related
I'm new in React. I would like to remove this warning. I tried to explore the Web and tried many solutions but none was working for me (key, rowkey, loop, etc.)
Error:
Check the render method of RankingTable
in tr (created by RankingTable)
in RankingTable react_devtools_backend.js:2540:25
Do you have an idea for this issue?
return (
<div className = "overflow-x-auto">
<table className="ranking_table table-auto border-collapse w-full" >
<caption className="sr-only">{ caption }</caption>
<thead>
{
fields.map((field) => (
<tr>
<th>{ field.player }</th>
<th>{ field.total }</th>
<th>{ field.exact }</th>
<th>{ field.good } </th>
</tr>
))
}
</thead>
<tbody>
{
rows.map((row, loop) => (
<tr key={row.key}>
<td>
<span className={`rounded-full rank ranking-${loop + 1}`}>{ loop + 1 }</span> { row.username },
</td>
<td>
{ row.cntTotal }
</td>
<td>
{ row.cntExact }
</td>
<td>
{ row.cntGood }
</td>
</tr>
))
}
</tbody>
</table>
</div>
)
Thanks!
Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.
Source of content https://reactjs.org/docs/lists-and-keys.html#keys
You have to pass unique value in key for each iteration of map. Which must not be repeat through out the loop iteration.
If there exist a unique id or any unique value in the fields for each object, then you can pass it in key.
<thead>
{
fields.map((field) => (
<tr key={field.<id or something that is unique>}>
<th>{ field.player }</th>
<th>{ field.total }</th>
<th>{ field.exact }</th>
<th>{ field.good } </th>
</tr>
))
}
</thead>
You're missing the key in your mapping, like #Shawn Yap said. Make sure to use something unique.
The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys.
The updated thead should look like this:
<thead>
{
fields.map((field) => (
<tr key={field.<id or something that is unique>}>
<th>{ field.player }</th>
<th>{ field.total }</th>
<th>{ field.exact }</th>
<th>{ field.good } </th>
</tr>
))
}
</thead>
I have an array which contains multiple objects like this:
const locations = [
{
information: ["Data Analyst", "Uruguay", "Montevideo", "$30,000"],
},
{
information: ["CTO", "UK", "Manchester", "$75,000"],
}
];
And I want to display each array in a new table row containing a <td> with each string.
Currently I have done this:
<tr>
{locations.map((location) => <td>{location.information}</td>)};
</tr>
Which returns each piece of information on a <td>
This is how the data looks at the minute:
And how it's meant to look
For this you have to use Array.map() like:
// To create tha table body by iterating data array
{
locations.map((location, locationIndex) =>
<tr key={locationIndex}>
<td>{location.information[0]}</td>
<td>{location.information[1]}</td>
<td>{location.information[2]}</td>
<td>{location.information[3]}</td>
</tr>
)
}
// In case you don't want to harcode the array index
{
locations.map((location, locationIndex) =>
<tr key={locationIndex}>
location.information.map((loc, locIndex) =>
<td key={locIndex}>{loc}</td>
)
</tr>
)
}
Change the code from,
<tr>
{locations.map((location) => <td>{location.information}</td>)};
</tr>
To:
<table border="1" width="100%" className="component_useRefBox">
<tbody>
{locations.map((location, i) => {
return (
<tr key={i}>
{location.information.map((data, j) => {
return <td key={j}> {data} </td>;
})}
</tr>
);
})}
</tbody>
</table>
To display two records row by row, you need to move {locations.map((location) .... )} above <tr> ... </tr> tag, because while using map method only each row will get iterated and you will get two separate rows..
{locations.map((location, i) => {
return (
<tr>
....
</tr>
)})}
As location.information is of array data, you cannot assign it directly.
You need to iterate using map and display each data like,
{location.information.map((data) => {
return <td> {data} </td>;
})}
Why in the following code Delete button click does not hit the delete method? What i am missing important thing? I am new to learn React.js
delete(e) {
console.log('Deleted');
}
static renderCatTable(Categories) {
return (
<table className='table table-striped'>
<thead>
<tr>
<th>Code</th>
<th></th>
</tr>
</thead>
<tbody>
{Categories.map(category =>
<tr key={category._id}>
<td>{category.code}</td>
<td><button onClick={this.delete} className="btn btn-danger">Delete</button></td>
</tr>
)}
</tbody>
</table>
);
}
I have defined the binding inside the constructor
this.delete = this.delete.bind(this);
The render function is given below.
render() {
let contents = this.state.loading
? <p><em>Loading...</em></p>
: Category.renderCatTable(this.state.Categories);
return (
<div>
{contents}
</div>
);
}
Because that render method is static. By definition, static methods cannot access an instance variable. You should remove that modifier if possible and it should work.
I have some data which i get in state when componentDidMount.
I am trying render table using this data.
In my case rows not rendering.
How i can send data to tbody ?
export default class App extends Component {
constructor(props) {
super(props);
this.state={rows:null}
}
componentDidMount(){
var rows=[]
Meteor.http.call("GET", url ,function(error,result){
$.each(JSON.parse(result.content), function(key, value){
rows.push(value)
});
this.setState({
rows:rows});
})
}
renderRows(){
$.each(this.state.rows, function(d){
return(
<tr>
<td>{d[0]}</td>
<td>{d[1]}</td>
<td>{d[2]}</td>
<td>{d[3]}</td>
</tr>
)
})
}
render(){
return(
<Table>
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
<tbody>
{this.renderRows}
</tbody>
</Table>
)
}
}
Another option, not using JQuery and avoiding having a separate render function, is to use .map
React likes it if you have a unique key on each element in a list, so hopefully one of the fields on your row can serve this purpose.
render(){
return(
<Table>
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
<tbody>
{this.state.rows.map(d => (
<tr key={d[0]}>
<td>{d[0]}</td>
<td>{d[1]}</td>
<td>{d[2]}</td>
<td>{d[3]}</td>
</tr>
)}
</tbody>
</Table>
)
}
You'll also need to set your initial state for rows to be [] rather than null, in order for the first render to work.
renderRows is a function so you need to execute it. Also you will need to update that function a bit:
export default class App extends Component {
// ...
componentDidMount(){
var rows=[];
var self = this;
Meteor.http.call("GET", url ,function(error,result){
$.each(JSON.parse(result.content), function(key, value){
rows.push(value)
});
self.setState({
rows: rows
});
});
}
renderRows(){
const rows = this.state.rows || [];
return rows.map(d => {
return(
<tr>
<td>{d[0]}</td>
<td>{d[1]}</td>
<td>{d[2]}</td>
<td>{d[3]}</td>
</tr>
);
});
}
render(){
return(
<Table>
{/* ... */}
<tbody>
{this.renderRows()}
</tbody>
</Table>
)
}
}
I am trying to get a click even to work with a table in reactjs. My first attempt was to make the whole row clickable. Here is my code:
var UserList = React.createClass({
getInitialState: function() {
return getUsers();
},
handleClick: function(e) {
console.log("clicked");
},
render: function() {
var users = this.state.users.map(function(user) {
return (
<tr onClick={this.handleClick}>
<td>{user.name}</td>
<td>{user.age}</td>
<td></td>
</tr>
);
});
return(
<div className="container">
<table className="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Full Detail</th>
</tr>
</thead>
<tbody>
{users}
</tbody>
</table>
</div>
);
}
});
This did not work. I then tried to add a button in the table:
<button className="btn" onClick={this.handleClick}>Full Detail</button>
That also did not work. I have other onClick's working throughout my app, but how do I make this work with a table?
Your problem is the function of user that creates the table row is not bound to your react component. The value of this will not be your react component and handleClick will not exist as a property of this.
Try
var users = this.state.users.map(function(user) {
return (
<tr onClick={this.handleClick}>
<td>{user.name}</td>
<td>{user.age}</td>
<td></td>
</tr>
);}.bind(this);
});
Or use Underscore's bind if you want it to work on all browsers.
I'm new to react. How about this? You just wrap it in another function, then that function holds the closure scope and it calls it correctly.
No idea if this is bad practice or the performance difference, but it seems to work...
var users = this.state.users.map(function(user) {
return (
<tr onClick={()=>this.handleClick(user)}>
<td>{user.name}</td>
<td>{user.age}</td>
<td></td>
</tr>
);}.bind(this);
});
Binding creates a new object. Thus if you bind your function for N employees, you are inefficiently creating N new functions. A more elegant approach is to bind the function once, and pass a reference to every row. Your original code was quite close. This is what I would suggest:
handleClick = e => {
const user = this.state.users.find(u => u.uuid == e.target.dataset.uui)
console.log("clicked");
},
render() {
return(
<div className="container">
<table className="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Full Detail</th>
</tr>
</thead>
<tbody>
{this.state.users.map(user =>
(
<tr data-uuid={user.uuid} onClick={this.handleClick}>
<td>{user.name}</td>
<td>{user.age}</td>
<td>{user.details || ''}</td>
</tr>
)
)}
</tbody>
</table>
</div>
);
}
});