Acessing specific table data from table row in React - reactjs

Question

It is my first time fetching data from an API and I'm quite new to React. Would be greatly appreciated if someone could help!
I am having trouble accessing some data inside a table row. I am trying to access the name property by clicking the row. What I want is to copy the name property from clicking the specific row.
Also, my useEffect keeps fetching data non-stop. I've tried to change the dependencies but it keeps doing it no matter what I do. I am passing the endpoint to the API from the button click.
Another thing is that when I am getting the data I would like to access every index of the array members but I tried and couldn't figure it out. So I am only accessing the index[1] (resp.guild.members[1].characters).
My Code:
import React, { useState, useEffect } from "react";
const Tabledata = ({ guildName }) => {
const [members, setMembers] = useState([]);
const [membersOnline, setMembersOnline] = useState([]);
useEffect(() => {
fetch(`https://api.tibiadata.com/v2/guild/${guildName}.json`)
.then((res) => res.json())
.then((resp) => {
console.log(resp);
setMembers(resp.guild.members[1].characters);
setMembersOnline(() =>
members.filter((player) => player.status !== "offline")
);
})
.catch((err) => console.log(err));
}, [members, guildName]);
return (
<div className="container">
<h1>Enemies Online</h1>
<table className="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Level</th>
<th>Vocation</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{membersOnline.map((d, id) => (
<tr
key={d.id}
onClick={(e) => {
console.log(this.d.name);
navigator.clipboard.writeText(`exiva "${e.target.value}`);
}}
>
<td>{d.name}</td>
<td>{d.level}</td>
<td>{d.vocation}</td>
<td>{d.status}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
export default Tabledata;
Code working:
import React, { useState, useEffect } from "react";
const Tabledata = ({ guildName }) => {
// const [members, setMembers] = useState([]);
const [membersOnline, setMembersOnline] = useState([]);
const [header, setHeader] = useState("");
useEffect(() => {
fetch(`https://api.tibiadata.com/v2/guild/${guildName}.json`)
.then((res) => res.json())
.then((resp) => {
const members = resp.guild;
setHeader(resp.guild.data.name);
const allCharacters = members.reduce((accum, iter) => {
accum.push(...iter.characters);
return accum;
}, []);
console.log(members);
console.log(allCharacters);
setMembersOnline(() =>
allCharacters.filter((player) => player.status !== "offline")
);
})
.catch((err) => console.log(err));
}, [guildName]);
return (
<div className="container">
<h1>{header}</h1>
<table className="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Level</th>
<th>Vocation</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{membersOnline.map((d) => (
<tr
key={d.id}
onClick={(e) => {
navigator.clipboard.writeText(
`exiva "${e.currentTarget.children[0].innerText}`
);
}}
>
<td>{d.name}</td>
<td>{d.level}</td>
<td>{d.vocation}</td>
<td>{d.status}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
export default Tabledata;
However, if I try to assign resp.guild to members somehow reduce won't work..something like this:
import React, { useState, useEffect } from "react";
const Tabledata = ({ guildName }) => {
const [members, setMembers] = useState([]);
const [membersOnline, setMembersOnline] = useState([]);
useEffect(() => {
fetch(`https://api.tibiadata.com/v2/guild/${guildName}.json`)
.then((res) => res.json())
.then((resp) => {
setMembers(resp.guild);
setHeader(resp.guild.data.name);
const allCharacters = members.reduce((accum, iter) => {
accum.push(...iter.characters);
return accum;
}, []);
setMembersOnline(() =>
allCharacters.filter((player) => player.status !== "offline")
);
})
.catch((err) => console.log(err));
}, [members, guildName]);
return (
<div className="container">
<h1>Enemies Online</h1>
<table className="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Level</th>
<th>Vocation</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{membersOnline.map((d, id) => (
<tr
key={d.id}
onClick={(e) => {
console.log(this.d.name);
navigator.clipboard.writeText(
`exiva "${e.target.value.innerText}`
);
}}
>
<td>{d.name}</td>
<td>{d.level}</td>
<td>{d.vocation}</td>
<td>{d.status}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
export default Tabledata;
It will throw an exception at reduce saying it is not a function

Answer 1

I have refactored your code, and it is working in a code sandbox here with no errors in rendering.
I made a few changes after looking at your updated question and looking at the API that you are using.
I removed members as a state object
I am setting the key value of the map function to the index of the array, because id is not a property of the members in the JSON response body.
I removed members from the dependency array as it no longer a managed state
I removed setHeader because it is not defined anywhere in your code example
I changed the filter to return offline members because there were literally no members online at the time of writing this.
Please reference the code sandbox I linked in order to fully understand any issues you come across implementing my code.
As a note: navigator.clipboard.writeText() as you have written it does not work in the code sandbox, but a console.log will show the value that is being written to the clipboard is correct. Questions about clipboard should be asked in their own stack overflow post.
const Tabledata = ({ guildName }) => {
const [membersOnline, setMembersOnline] = useState([]);
useEffect(() => {
fetch(`https://api.tibiadata.com/v2/guild/${guildName}.json`)
.then((res) => res.json())
.then((resp) => {
const { members } = resp.guild;
const allCharacters = members.reduce((accum, iter) => {
accum.push(...iter.characters);
return accum;
}, []);
setMembersOnline(
allCharacters.filter(({ status }) => status === "offline")
);
})
.catch((err) => console.log(err));
}, [guildName]);
return (
<div className="container">
<h1>Enemies Online</h1>
<table className="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Level</th>
<th>Vocation</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{membersOnline.map((d, i) => (
<tr
key={i}
onClick={(e) => {
navigator.clipboard.writeText(
`exiva ${e.currentTarget.children[0].innerText}`
);
}}
>
<td>{d.name}</td>
<td>{d.level}</td>
<td>{d.vocation}</td>
<td>{d.status}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
export default Tabledata