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.
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 :)
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>
))}
This is my Table.js file code.
In this component i pass UserData which hold data that come from the server, handleEditButton method for update my data and handleDeleteButton for delete my data. When UserData is empty than i'm return "No data found" other wise it's show's data in tabular format
const Table = ({ UserData, handleEditButton, handleDeleteButton }) => {
if (UserData == '') {
return (
<>
{
<h2>N Data Found</h2>
}
</>
)
}
else {
return (
<>
{
<table cellSpacing={0} cellPadding={0} className={tableStyles.details}>
<thead>
<tr>
<th className={tableStyles.table}>Id</th>
<th className={tableStyles.table}>Name</th>
<th className={tableStyles.table}>Address</th>
<th className={tableStyles.table}>E-mail</th>
<th className={tableStyles.table}>Mobile No</th>
<th className={tableStyles.table}>Gender</th>
<th className={tableStyles.table}>City</th>
<th className={tableStyles.table}>Action</th>
</tr>
</thead>
<tbody>
{
(UserData && UserData.map((user) => (
<tr>
<th key={user.id}>{user.id}</th>
<td className={tableStyles.name}>{user.name}</td>
<td className={tableStyles.address}>{user.address}</td>
<td className={tableStyles.mail}>{user.mail}</td>
<td>{user.no}</td>
<td>{user.gender}</td>
<td>{user.city}</td>
<td colSpan={2} className={tableStyles.btnGroup}>
<button className={tableStyles.editBtn} onClick={(e) => { handleEditButton(user.id) }}>Edit</button>
<button className={tableStyles.deleteBtn} onClick={(e) => { handleDeleteButton(user.id) }}>Delete</button>
</td>
</tr>
)))
}
</tbody>
</table>
}
</>
)
}
}
You missed adding a ternary condition.
You can check with the following code.
const Table = ({ UserData, handleEditButton, handleDeleteButton }) => {
{
UserData == "" ? (
<h2>No Data Found</h2>
) : (
<table cellSpacing={0} cellPadding={0} className={tableStyles.details}>
<thead>
<tr>
<th className={tableStyles.table}>Id</th>
<th className={tableStyles.table}>Name</th>
<th className={tableStyles.table}>Address</th>
<th className={tableStyles.table}>E-mail</th>
<th className={tableStyles.table}>Mobile No</th>
<th className={tableStyles.table}>Gender</th>
<th className={tableStyles.table}>City</th>
<th className={tableStyles.table}>Action</th>
</tr>
</thead>
<tbody>
{UserData &&
UserData.map((user) => (
<tr>
<th key={user.id}>{user.id}</th>
<td className={tableStyles.name}>{user.name}</td>
<td className={tableStyles.address}>{user.address}</td>
<td className={tableStyles.mail}>{user.mail}</td>
<td>{user.no}</td>
<td>{user.gender}</td>
<td>{user.city}</td>
<td colSpan={2} className={tableStyles.btnGroup}>
<button
className={tableStyles.editBtn}
onClick={(e) => {
handleEditButton(user.id);
}}
>
Edit
</button>
<button
className={tableStyles.deleteBtn}
onClick={(e) => {
handleDeleteButton(user.id);
}}
>
Delete
</button>
</td>
</tr>
))}
</tbody>
</table>
);
}
};
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 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.