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 :)
Related
Rendering not working in td tag, outside td the data is showing but not getting rendering HTML.
td not working.
Data is printing if do console.log but not getting render in HTML
SetArrayTime((prev_array_time) => {
let newArray = [...prev_array_time];
newArray.push(intervals);
return newArray;
});
};
return (
<table className="table table-bordered">
<thead className="thead text-center">
<tr>
<th scope="col">From</th>
<th scope="col">To</th>
</tr>
</thead>
<tbody>
{array_time &&
array_time.map((d, i) => {
console.log("123-d", d);
return (
<tr key={i}>
<td>
{d.from}-{d.to}
</td>
<td></td>
</tr>
);
})}
</tbody>
</table>
);
map return array of react elemnt,react by default map of the array and render. it does not need return
Try this
{array_time?.map((d, i) => (
<tr key={i}>
<td>
{d.from}-{d.to}
</td>
<td></td>
</tr>
))}
In my application, I need to reuseable data table component. Where I can change table-header & table-body with dynamic content.
<table className="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Image</th>
<th>Title</th>
<th>Publish Date</th>
</tr>
</thead>
<tbody>
{data &&
data.map(item => (
<tr key={item.id}>
<td>{item.id}</td>
<td>{item.image}</td>
<td>{item.title}</td>
<td>{item.publishDate}</td>
</tr>
))}
</tbody>
</table>
See if this works! https://stackblitz.com/edit/react-ie2rt6
import React from "react";
const Table = ({ headers, data }) => {
return (
<div>
<table>
<thead>
<tr>
{headers.map(head => (
<th>{head}</th>
))}
</tr>
</thead>
<tbody>
{data.map(row => (
<tr>
{headers.map(head => (
<td>{row[head]}</td>
))}
</tr>
))}
</tbody>
</table>
</div>
);
};
export default Table;
This might help
const CustomTable = ({header, posts}) => {
return (
<table>
<thead>
<tr>
<th>#</th>
<th>{header.image}</th>
<th>{header.title}</th>
<th>{header.publishedDate}</th>
</tr>
</thead>
<tbody>
{posts &&
posts.map(item => (
<tr key={item.id}>
<td>{item.id}</td>
<td>{item.image}</td>
<td>{item.title}</td>
<td>{item.publishDate}</td>
</tr>
))}
</tbody>
</table>
);
}
You can pass header and posts array wherever you need it.
<div className='table'>
<CustomTable header={header} posts={posts} />
</div>
I am trying to render a table inside a react component but having trouble aligning the rows with the header
render() {
console.log("Top Searches",this.props.topSearches)
return(
<div className="topsearches">
<table border="2" align="center">
<th> Search Term </th>
<th>Count </th>
{this.props.topSearches.map((top_search, index) => (
<tr>
{Object.keys(top_search).map(function(key) {
return <div>
<tbody>
<td align="center">{key} </td>
<td align="right">{top_search[key]}</td>
</tbody>
</div>
})}
</tr>
))}
</table>
</div>
)
}
This is the output i am getting
I assume, you are trying to achieve something like this.
I have edited this in codesandbox here.
https://codesandbox.io/s/sparkling-sound-yd1ih
return (
<div className="topsearches">
<table border="2" align="center">
<thead>
<th> Search Term </th>
<th>Count </th>
</thead>
<tbody>
{props.topSearches.map((top_search, index) =>
Object.keys(top_search).map((key, index) => {
return (
<tr>
<td>{key}</td>
<td>{top_search[key]}</td>
</tr>
);
})
)}
</tbody>
</table>
</div>
);
Modification I made to achieve this:
Added <thead>
Corrected <tbody> loop
Please let me know if you have any further questions!
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.