I have a functional component which is reading data from an API. I have defined an Interface but unable to loop and display in table using Map in react.
error
index.js:1 Warning: Each child in a list should have a unique "key" prop.
Interface
export interface ISiteManager{
managerId: number,
name: string,
isDeleted: false
}
React functional component return template
...
return (
<div>
<h2>EziTracker Dashboard Report</h2>
{eziStatusCollection && eziStatusCollection.length >0 && (
<table className="table">
<thead>
<tr>
<th>ManagerId</th>
<th>Name</th>
<th>Is Deleted</th>
</tr>
</thead>
{
eziStatusCollection.map((item, index) => {
return(
<tbody>
<tr key={index}>
<td>{item.managerId}</td>
<td>{item.name}</td>
<td>{item.isDeleted}</td>
</tr>
</tbody>
)})
}
</table>)}
</div>
);
};
export default MyComponent;
Your table body should be outside the map, as it's looping it each time as well:
<tbody>
{
eziStatusCollection.map((item, index) => {
return(
<tr key={index}>
<td>{item.managerId}</td>
<td>{item.name}</td>
<td>{item.isDeleted}</td>
</tr>
)})
}
</tbody>
This way the map key will be associated with each child (tr) and the error shouldn't occur.
Related
I am facing a weird problem while working with tankStack react-table. I want render some specific tags with extra data. example: i want to render the age column like this (this is the {age})
But don't want to make the tag child of tag but that is happening
Here is my code
<table>
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map((row) => (
<tr key={row.id}>
{row.getVisibleCells().map((cell) => {
return(
<td key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
)
})
}
</tr>
))}
</tbody>
</table>
Column.js
export const COLUMNS = [
{
header:'First Name',
accessorKey:'first_name',
id:'first_name'
},
{
header:'Last Name',
accessorKey:'last_name',
id:'last_name'
},
{
header:'Age',
accessorKey:'age',
id:'age',
cell: data => <td>this is age{data.getValue()}</td>,
enableGlobalFilter: false,
}
]
Hi I am currently working with Spotify API with Spring Boot as the backend and React for the front end.
I was able to retrieve a user's favorite artist using the API in a json format but as I am not familiar with React, I am currently having problems displaying the data.
The json data that I have retrieved looks something like this.
[{"externalUrls":{"externalUrls":{"spotify":"https://open.spotify.com/artist/3dz0NnIZhtKKeXZxLOxCam"}},"followers":{"href":null,"total":929384},"genres":["complextro","edm","progressive electro house"],"href":"https://api.spotify.com/v1/artists/3dz0NnIZhtKKeXZxLOxCam","id":"3dz0NnIZhtKKeXZxLOxCam","images":[{"height":640,"url":"https://i.scdn.co/image/ab6761610000e5eb1804f56bdcb9322c5f3f8f21","width":640},{"height":320,"url":"https://i.scdn.co/image/ab676161000051741804f56bdcb9322c5f3f8f21","width":320},{"height":160,"url":"https://i.scdn.co/image/ab6761610000f1781804f56bdcb9322c5f3f8f21","width":160}],"name":"Porter Robinson","popularity":68,"type":"ARTIST","uri":"spotify:artist:3dz0NnIZhtKKeXZxLOxCam"},{"externalUrls":{"externalUrls":{"spotify":"https://open.spotify.com/artist/6M2wZ9GZgrQXHCFfjv46we"}},"followers":{"href":null,"total":27618208},"genres":["dance pop","pop","uk pop"],"href":"https://api.spotify.com/v1/artists/6M2wZ9GZgrQXHCFfjv46we","id":"6M2wZ9GZgrQXHCFfjv46we","images":[{"height":640,"url":"https://i.scdn.co/image/ab6761610000e5ebd42a27db3286b58553da8858","width":640},{"height":320,"url":"https://i.scdn.co/image/ab67616100005174d42a27db3286b58553da8858","width":320},{"height":160,"url":"https://i.scdn.co/image/ab6761610000f178d42a27db3286b58553da8858","width":160}],"name":"Dua Lipa","popularity":94,"type":"ARTIST","uri":"spotify:artist:6M2wZ9GZgrQXHCFfjv46we"}]
I am hoping to display this with React but seem to run into an error that reads
"Warning: Each child in a list should have a unique "key" prop."
My 'ListArtistComponent.jsx' file in my React application looks something like this.
class ListArtistComponent extends Component{
constructor(props) {
super(props);
this.state = {
artist: []
}
}
componentDidMount(){
ArtistService.getArtist().then((res) => {
this.setState({ artist: Array.from(res.data)});
});
}
render() {
return(
<div>
<h2 className="text-center">Artist List</h2>
<div className="row">
<table className="table table-striped table-bordered">
<thead>
<tr>
<th>Artist Name</th>
<th>Artist Popularity</th>
</tr>
</thead>
<tbody>
{
this.state.artist.map(
artist =>
<tr key = {artist.id}>
<td> {artist.name} </td>
<td> {artist.popularity} </td>
</tr>
)
}
</tbody>
</table>
</div>
</div>
)
}
}
export default ListArtistComponent;
And my ArtistService looks something like this
class ArtistService {
getArtist(){
return axios.get("http://localhost:8080/api/topartist")
}
}
export default new ArtistService()
I am guessing that a problem occurred when setting the 'id'(in the given json "3dz0NnIZhtKKeXZxLOxCam" and "6M2wZ9GZgrQXHCFfjv46we" respectively) value as the key, it would be appreciated if I could know what seems to be causing the problem and a solution for it.
Thank you in advance!!
I don't see any problem.
But if we use array index for the unique key.
can you try this?
class ListArtistComponent extends Component{
constructor(props) {
super(props);
this.state = {
artist: []
}
}
componentDidMount(){
ArtistService.getArtist().then((res) => {
this.setState({ artist: Array.from(res.data)});
});
}
render() {
return(
<div>
<h2 className="text-center">Artist List</h2>
<div className="row">
<table className="table table-striped table-bordered">
<thead>
<tr>
<th>Artist Name</th>
<th>Artist Popularity</th>
</tr>
</thead>
<tbody>
{
this.state.artist.map(
(artist,index) =>
<tr key = {index}>
<td> {artist.name} </td>
<td> {artist.popularity} </td>
</tr>
)
}
</tbody>
</table>
</div>
</div>
)
}
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 want to generate a row for each item in my list. The way i'm currently trying to achieve this is with the following:
<thead>
<tr>
<th>Title</th>
<th>Date</th>
<th>People</th>
<th>Status</th>
</tr>
</thead>
{ this.renderEvents() }
renderEvents() {
const events = this.state.data;
console.log(events);
return (
<tbody>
{ events.forEach((event) => {
return (
<tr>
<td>{event.title}</td>
<td>{event.startDate}</td>
<td>{event.userList.length}</td>
<td><Badge color="success">Coming</Badge></td>
</tr>
);
})}
</tbody>
);
}
The problem i'm currently facing is that my console.log(events) line gets executed twice and the table stays empty.
Any help is appreciated! :)
Array#forEach does not return a new array. Try Array#map instead!
return (
<tbody>
{ events.map((event) => {
return (
<tr>
<td>{event.title}</td>
<td>{event.startDate}</td>
<td>{event.userList.length}</td>
<td><Badge color="success">Coming</Badge></td>
</tr>
);
})}
</tbody>
);
Another way to do this
render(){
const data = events.map(
event => {
<tbody>
<tr>
<td>{event.title}</td>
<td>{event.startDate}</td>
<td>{event.userList.length}</td>
<td><Badge color="success">Coming</Badge></td>
</tr>
</tbody>
})
return (
<div>
{data}
</div>
)
}
More React idiomatic solution would be to use a React Component instead of calling function that returns jsx. Component is created once and mounted once, instead, function will each time return a new component (meaning the memory link will change) that will cause React reconciliation mechanism to each time mount and unmount a Component. That is not good for React performance.
I would recommend structuring your code in a next manner:
class EventViewer extends React.Component {
// keep logic of fetching events here and saving them (to state for example)
render() {
return (
<table>
<EventVieverHeader />
<EventVieverBody events={this.state.events}/>
</table>
)
}
}
const EventVieverHeader = () => (
<tr>
<td>{event.title}</td>
<td>{event.startDate}</td>
<td>{event.userList.length}</td>
<td><Badge color="success">Coming</Badge></td>
</tr>
);
const EventVieverBody = ({events}) => (
<tbody>
{events.map(
event => {
<tr>
<td>{event.title}</td>
<td>{event.startDate}</td>
<td>{event.userList.length}</td>
<td><Badge color="success">Coming</Badge></td>
</tr>
})}
</tbody>
)
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>
);
}
});