I'm trying to map over an array, and display what I want in table items. It was asking me for a unique key, so I chose the following code because I used it in another component. I'm curious why it's not working here.
renderData() {
const { aminos } = this.props.aminos;
return aminos.map((micro, i) => {
return (
<Table>
<tbody>
<tr>
<th scope="row">1</th>
<th key={i}>{micro.name}</th>
</tr>
<tr>
<td key={i}>{micro.serum.current}</td>
<td key={i}>{micro.serum.prev}</td>
<td key={i}>{micro.serum.ref}</td>
</tr>
</tbody>
</Table>
)
}
The key should be placed on the outer most component.
return aminos.map((micro, i) => {
return (
<Table key={i}>
<tbody>
<tr>
<th scope="row">1</th>
<th >{micro.name}</th>
</tr>
<tr>
<td>{micro.serum.current}</td>
<td>{micro.serum.prev}</td>
<td>{micro.serum.ref}</td>
</tr>
</tbody>
</Table>
)
}
Although this map will display multiple tables nor sure this is your desired effect. Also using the index as keys is not a good idea you should use some sort of unique id like a primary key from your Database.
Related
I am new to reactjs. I am trying to create a table with inputs like below,
<table className="table table-bordered table-sm">
<thead>
<tr>
<th></th>
{gameList.map((game)=>{
return (
<th key={game.id}>{game.game_type}</th>
)
})}
</tr>
</thead>
<tbody>
{roundList.map((round)=>{
return(
<tr key={round.id}>
<td>{round.game_round}</td>
{gameList.map((game)=>{
return (
<td key={game.id}>
<input type="text"/>
</td>
)
})
}
</tr>
)
})}
</tbody>
</table>
How do I get all input values by gameId and roundId accordingly?
Hi, If i may notice You are trying to use pure Js in reactJS :). If you want to use same semantic as above lets than add some hooks ;)
const [inputValues, setInputValues] = useState({});
<table className="table table-bordered table-sm">
<thead>
<tr>
<th></th>
{gameList.map((game)=>{
return (
<th key={game.id}>{game.game_type}</th>
)
})}
</tr>
</thead>
<tbody>
{roundList.map((round, index)=>{
return(
<tr key={round.id}>
<td>{round.game_round}</td>
{gameList.map((game, ind)=>{
return (
<td key={game.id}>
<input
type="text"
value={inputValues?.[`${round.id}`]?.[`${game.id}`]}
onChange={(event) => {
setInputValues(old => ({...old, [`${round.id}`]: {...old[`${round.id}`], [`${game.id}`]: event.target.value}}))
}/>
</td>
)
})
}
</tr>
)
})}
</tbody>
</table>
now you have state inputValues for all input values in one object, so you can access them by order.id and game.id.
This is one solutions based on your html structure above, but i strongly recommend to You to create separate Input component, your own controlled component and than to use it maybe in form, than you will have all values in onSubmit form function :)
I am pulling data that gives me a news article title and url separately:
I would like to combine the url and title. Here is how I am mapping the table:
<Table striped bordered hover variant="dark">
<thead>
<tr>
<th>Title</th>
<th>URL</th>
</tr>
</thead>
{props.value.map(item => (
<tbody key={item.id}>
<tr>
<td>{item.title}</td>
<td>{item.url}</td>
</tr>
</tbody>
))}
);
So I want the title to be a link to the url, instead of having the separation that is currently occurring. How can I accomplish this? The unique thing is each title has a different URL - all the resources I have found only show mapping for a single URL.
Try like this.
<Table striped bordered hover variant="dark">
<thead>
<tr>
<th>Title</th>
</tr>
</thead>
{props.value.map(item => (
<tbody key={item.id}>
<tr>
<td><a href={item.url}>{item.title}</a></td>
</tr>
</tbody>
))}
I'm developing a way the admon can edit stored data in ParseServer.
I implemented a way to search records, filter data and re-render again. Now, my need is edit the fetched data and update the record via UPDATE VERB.
How could get the row data?. For example console.log the the "Código".
This my source code:
render() {
return (
<table className="table table-hover table-bordered">
<thead>
<tr>
<th scope="col"><center>Edit</center></th>
<th scope="col"><center>#</center></th>
<th scope="col"><center>Código</center></th>
<th scope="col">Nombres</th>
<th scope="col">Apellidos</th>
<th scope="col">Grado</th>
</tr>
</thead>
<tbody id="cursorPointer">
{/*Rendering data*/}
{this.state.data.map(function(item, key) {
return (
<tr key = {key} >
<td><center><button ... > Edit </button></center></td>
<td><center>{item.objectId}</center></td>
<td><center>{item.Codigo}</center></td>
<td>{item.Nombres}</td>
<td>{item.Apellidos}</td>
<td>{item.Grado}</td>
</tr>
)
})}
</tbody>
</table>
)
}
Any idea?
You can create a method edit that will receive the data of the row, and call it on the button Edit:
edit = (data) => {
// Do whatever you want
}
render() {
return (
<table className="table table-hover table-bordered">
<thead>
<tr>
<th scope="col"><center>Edit</center></th>
<th scope="col"><center>#</center></th>
<th scope="col"><center>Código</center></th>
<th scope="col">Nombres</th>
<th scope="col">Apellidos</th>
<th scope="col">Grado</th>
</tr>
</thead>
<tbody id="cursorPointer">
{/*Rendering data*/}
{this.state.data.map( (item, key) => {
return (
<tr key = {key} >
<td>
<center>
<button onClick={() => this.edit(item)}>Edit<button>
</center>
</td>
<td><center>{item.objectId}</center></td>
<td><center>{item.Codigo}</center></td>
<td>{item.Nombres}</td>
<td>{item.Apellidos}</td>
<td>{item.Grado}</td>
</tr>
)
})}
</tbody>
</table>
)
}
PS: Note that the function of the map needs to be an arrow function, to bind the component to it, then it can access the edit method.
hi i have a table with data i want when i clicked on any row its shows it id name and date of birth in blank page or any where ,,where my table disappair..here is code of my table
<table className='content'>
<tbody>
<th>ID</th>
<th>Name</th>
<th>Birth</th>
{
this.state.data.map(item=>{
return (
<tr onClick={this.handleclick}>
<td >{item.id}</td>
<td >{item.name}</td>
<td >{item.dateofBirth}</td>
</tr>
);
})
}
</tbody>
</table>
and here i want to write onclick method
handleclick(event,id,name,dateofBirth)
{
event.preventDefault();
console.log('click fun
active',this.state.data.id,this.state.name,this.state.dateofBirth);
}
You're not passing anything into your handleClick method, apart from event, which it's passed automatically. If you want to pass all the other variables in, then you need to wrap the call in a closure function, like so:
<table className='content'>
<tbody>
<th>ID</th>
<th>Name</th>
<th>Birth</th>
{
this.state.data.map(item=>{
return (
<tr onClick={e => this.handleclick(e, item.id, item.name, item.dateofBirth)}
key={item.id}>
<td >{item.id}</td>
<td >{item.name}</td>
<td >{item.dateofBirth}</td>
</tr>
);
})
}
</tbody>
</table>
You should also add a key to your tr.
I have a paginated table using a smart table. I want to sort using first the status and then the code. I can't use orderBy from AngularJS because it will order the elements of each page, not all. And st-sort-default of smart table orders only for one column.
<table st-table="lista.displayedPublications" st-safe-src="lista.publications">
<thead>
<tr>
<th st-sort="publication.status" >STATO</th>
<th st-sort="publication.communicationCode">TREAT CD</th>
<th> ... </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="publication in lista.displayedPublications">
<td>{{publication.status}}</td>
<td>{{publication.communicationCode}}</td>
<td>...</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<div st-template="ListaTreatement/pagination.html" st-pagination="" st-items-by-page="10"></div>
</td>
</tr>
</tfoot>
</table>
In the controller:
public publications: PublicationExtended[];
public displayedPublications = [].concat(this.publications);
constructor(...){
new Api($http).getList(me.comunicationType, me.comunicationStatus).then(
function(response : angular.IHttpPromiseCallbackArg<PublicationExtended[]>) {
me.publications = response.data;
}
}
use $filter("orderBy")($scope.lista.displayedPublications, ["+status", "+code"]); in your controller to sort your data before providing it to your table. + and - can be used to set descending or ascending sort order.