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>
))}
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 trying to fetch data from api and display it. I am able to fetch the data and display it. But only one array is being rendered in my console. I have more than one arrays in my postman.
Would anyone be able to guide me? Any help would be appreciated.
Thank you.
{data.data?.map(data => {
return(
<div key={data}>
<table className="ui celled table">
<thead>
<tr>
<th> Name</th>
<th>Surname</th>
<th> Place</th>
</tr></thead>
<tbody>
<tr>
<td data-label="Name">{data.name}</td>
<td data-label="Surname">{ data.surname }</td>
<td data-label="Place">{ data.place}</td>
</tr>
</tbody>
</table>
</div>
) })}
</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.