We Keep Coding

How to create a refresh button with 4 different data end points in React?

I created a table on(table.js) with 4 different endpoints(app.js) I would like to add a refresh button that will refresh the data when clicked on. How would I do that with 4 different endpoints? I did try the interval but it refreshed the whole page.
This is my App.file where the data was fetched from.
function App() {
const [feed, setFeed] = useState([]);
const [feedol, setFeedol] = useState([]);
const [jsonData, setJsonData] = useState([]);
const [azureData, setAzureData] = useState([]);
useEffect(() => {
fetch("/feed").then((response) =>
response.json().then((data) => {
setFeed(data);
})
);
}, []);
useEffect(() => {
fetch("/feed_ol").then((response) =>
response.json().then((data) => {
setFeedol(data);
})
);
}, []);
useEffect(() => {
fetch("/json_data").then((response) =>
response.json().then((data) => {
setJsonData(data["archive"][0]);
})
);
}, []);
useEffect(() => {
fetch("/azure_data").then((response) =>
response.json().then((data) => {
setAzureData(data);
})
);
}, []);
Table.js
import React from "react";
import { Card, Container } from "react-bootstrap";
import { BsArrowClockwise } from "react-icons/bs";
import Cards from "./Cards";
import "./tables.css";
export const Tables = ({ feed, feedol, jsonData, azureData, refresh
}) => {
return (
<Container>
<Cards />
<Card className="table-card">
<Card.Header>
{" "}
<button type="button" className=" refresh-button" onClick=
{}>
{" "}
<BsArrowClockwise />
</button>{" "}
OneLogin Outages{" "}
</Card.Header>
<Card.Body>
<table className="table table-bordered">
<thead>
<tr>
<th>Title</th>
<th>Link</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>{feedol.title}</td>
<td>{feedol.link}</td>
<td>{feedol.updated}</td>
</tr>
<tr>
<td>{}</td>
<td>{}</td>
<td>{}</td>
</tr>
<tr>
<td>{jsonData.service_name}</td>
<td>{jsonData.summary}</td>
<td>{jsonData.date}</td>
</tr>
</tbody>
</table>
</Card.Body>
</Card>
<Cards />
<Card className="table-card">
<Card.Header> Unifi Outages </Card.Header>
<Card.Body>
<table className="table table-bordered">
<thead>
<tr>
<th>Title</th>
<th>Link</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>{feed.title}</td>
<td>{feed.link}</td>
<td>{feed.updated}</td>
</tr>
<tr>
<td>{}</td>
<td>{}</td>
<td>{}</td>
</tr>
<tr>
<td>{azureData.title}</td>
<td>{azureData.link}</td>
<td>{azureData.updated}</td>
</tr>
</tbody>
</table>
</Card.Body>
</Card>
</Container>
);
};

It doesn't matter how complex the refresh is, put it all in one function:
const App = () => {
const fetchAndSet = () => {
// all the fetch and sets
}
useEffect(() => { fetchAndSet(); }, []);
return <Table refresh={fetchAndSet} />;
}

If your fetch action depends on a click, do not use useEffect as useEffect is intended to be used to synchronize state.
const URLS = {
feed: '/feed',
feedol: '/feed_ol',
jsonData: '/json_data',
azureData: '/azure_data'
}
function App() {
const [data, setData] = useState({
feed: [],
feedol: [],
jsonData: [],
azureData: []
})
//reusable function
const handleFetch = (type) => {
fetch(URLS[type]).then((response) =>
response.json().then((data) => {
setData(d => ({
...d, [type]: data
}));
})
}
//Table.js
import React from "react";
import { Card, Container } from "react-bootstrap";
import { BsArrowClockwise } from "react-icons/bs";
import Cards from "./Cards";
import "./tables.css";
export const Tables = ({ feed, feedol, jsonData, azureData, handleFetch
}) => {
return (
<Container>
<Cards />
<Card className="table-card">
<Card.Header>
{" "}
<button type="button" className=" refresh-button" onClick={
() => {Object.keys(URLS).map(handleFetch)}
}>
{" "}
<BsArrowClockwise />
</button>{" "}
OneLogin Outages{" "}
</Card.Header>
<Card.Body>
<table className="table table-bordered">
<thead>
<tr>
<th>Title</th>
<th>Link</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>{feedol.title}</td>
<td>{feedol.link}</td>
<td>{feedol.updated}</td>
</tr>
<tr>
<td>{}</td>
<td>{}</td>
<td>{}</td>
</tr>
<tr>
<td>{jsonData.service_name}</td>
<td>{jsonData.summary}</td>
<td>{jsonData.date}</td>
</tr>
</tbody>
</table>
</Card.Body>
</Card>
<Cards />
<Card className="table-card">
<Card.Header> Unifi Outages </Card.Header>
<Card.Body>
<table className="table table-bordered">
<thead>
<tr>
<th>Title</th>
<th>Link</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>{feed.title}</td>
<td>{feed.link}</td>
<td>{feed.updated}</td>
</tr>
<tr>
<td>{}</td>
<td>{}</td>
<td>{}</td>
</tr>
<tr>
<td>{azureData.title}</td>
<td>{azureData.link}</td>
<td>{azureData.updated}</td>
</tr>
</tbody>
</table>
</Card.Body>
</Card>
</Container>
);
};

load the data dynamically by id on button click in ReactJS

import React,{Component} from 'react'
class Todo extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
fetchdata: [],
};
}
componentDidMount() {
fetch("https://jsonplaceholder.typicode.com/todos")
.then((res) => res.json())
.then((json) => {
this.setState({
data: json,
});
});
}
componentDidUpdate(){
this.fetchdata();
}
fetchdata=()=>{
fetch("https://jsonplaceholder.typicode.com/users/:id")
.then((res) => res.json())
.then((json) => {
this.setState({
fetchdata: json.data,
});
});
}
render() {
const { data, fetchdata } = this.state;
return (
<div>
<div className="Todos row g-3">
<table class="table col-auto">
<thead>
<tr>
<th scope="col">Todo</th>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{this.state.data.map((data, index) => (
<tr key={index}>
<th scope="row">{data.id}</th>
<td>{data.title}</td>
<td>{data.completed}</td>
<td>
<button onClick={this.fetchdata.bind(this, data)}>
View
</button>
</td>
</tr>
))}
;
</tbody>
</table>
</div>
<div className="show-data col-auto">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Todo_Id</th>
<th scope="col">Todo_title</th>
<th scope="col">User_id</th>
</tr>
</thead>
<tbody>
{this.state.fetchdata.map((fetchdata, index) => (
<tr key={index}>
<th scope="row">{fetchdata.id}</th>
<td>{fetchdata.name}</td>
<td>{fetchdata.email}</td>
</tr>
))}
;
</tbody>
</table>
</div>
</div>
);
}
}
export default Todo
This is my code I want to load data on button click but I am getting an error: "Cannot read properties of undefined (reading 'map') ". I am new to react js and don't know how to do it. The data is not getting loaded in the below table on button click by id. The first table data is loading correctly.

There were few issues
id was not passed as a param to fetchdata
respnse data was JSON not an Array
DO NOT call any function in componentDidUpdate without checking prev state. There was an infinite loop calling the API.
No need to bind fetchdata function as it is an arrow function.
import React, { Component } from "react";
class Todo extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
fetchdata: []
};
}
componentDidMount() {
fetch("https://jsonplaceholder.typicode.com/todos")
.then((res) => res.json())
.then((json) => {
this.setState({
data: json
});
});
}
fetchdata = (id) => {
console.log(id);
fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
.then((res) => res.json())
.then((json) => {
console.log(json);
this.setState({
fetchdata: json
});
});
};
render() {
const { data, fetchdata } = this.state;
return (
<div>
<div className="Todos row g-3">
<table class="table col-auto">
<thead>
<tr>
<th scope="col">Todo</th>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{this.state.data.map((data, index) => (
<tr key={index}>
<th scope="row">{data.id}</th>
<td>{data.title}</td>
<td>{data.completed}</td>
<td>
<button onClick={() => this.fetchdata(data.id)}>
View
</button>
</td>
</tr>
))}
;
</tbody>
</table>
</div>
<div className="show-data col-auto">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Todo_Id</th>
<th scope="col">Todo_title</th>
<th scope="col">User_id</th>
</tr>
</thead>
<tbody>
{this.state.fetchdata && (
<tr>
<th scope="row">{fetchdata.id}</th>
<td>{fetchdata.name}</td>
<td>{fetchdata.email}</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
}
}
export default Todo;
Sandbox code => https://codesandbox.io/s/pensive-parm-c0l54?file=/src/App.js:0-2277

If you are new to react i highly recommend you to use hooks, but there are several things you can do in your Code:
1-Fetch data(you need id i Think, so):
fetchdata=(id)=>{
fetch(https://jsonplaceholder.typicode.com/users/${id})
.then((res) => res.json())
.then((json) => {
this.setState({
fetchdata: json.data,
});
});
}
This Way you pass the id by arguments.
2- onClick función:
View
As you Will need the id to pass it to the fetch función. No need bina with fan Arrow function
3- This is the Code i suggest for hooks:
import React, {useState, useEffect} from "react";
const Todo = () => {
const [data, setData] = useState([])
const [fetchdata,setFetchdata] = useState([])
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/todos")
.then((res) => res.json())
.then((json) => {
setData(json);
});
},[])
const fetchdataById = (id) => {
console.log(id);
fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
.then((res) => res.json())
.then((json) => {
console.log(json);
setFetchdata(json)
});
};
return (
<div>
<div className="Todos row g-3">
<table class="table col-auto">
<thead>
<tr>
<th scope="col">Todo</th>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{data.map((data, index) => (
<tr key={index}>
<th scope="row">{data.id}</th>
<td>{data.title}</td>
<td>{data.completed}</td>
<td>
<button onClick={() => fetchdataById(data.id)}>
View
</button>
</td>
</tr>
))}
;
</tbody>
</table>
</div>
<div className="show-data col-auto">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Todo_Id</th>
<th scope="col">Todo_title</th>
<th scope="col">User_id</th>
</tr>
</thead>
<tbody>
{fetchdata && (
<tr>
<th scope="row">{fetchdata.id}</th>
<td>{fetchdata.name}</td>
<td>{fetchdata.email}</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
}
export default Todo;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Something like this should Work,

here's what you can do:
class Todo extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
fetchdata: {}
};
}
componentDidMount() {
fetch("https://jsonplaceholder.typicode.com/todos")
.then((res) => res.json())
.then((json) => {
this.setState({
data: json
});
});
}
fetchdata = (todo) => {
fetch("https://jsonplaceholder.typicode.com/users/" + todo.id)
.then((res) => res.json())
.then((json) => {
this.setState({
fetchdata: json
});
});
};
render() {
const { data, fetchdata } = this.state;
return (
<div>
<div className="Todos row g-3">
<table className="table col-auto">
<thead>
<tr>
<th scope="col">Todo</th>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{data.map((todo, index) => (
<tr key={index}>
<th scope="row">{todo.id}</th>
<td>{todo.title}</td>
<td>{todo.completed}</td>
<td>
<button onClick={() => this.fetchdata(todo)}>View</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
<div className="show-data col-auto">
<table className="table table-striped">
<thead>
<tr>
<th scope="col">Todo_Id</th>
<th scope="col">Todo_title</th>
<th scope="col">User_id</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">{fetchdata.id}</th>
<td>{fetchdata.name}</td>
<td>{fetchdata.email}</td>
</tr>
</tbody>
</table>
</div>
</div>
);
}
}
ReactDOM.render(
<Todo />,
document.body
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

How to define the length of the array when using map function and display the rows which have data?

I have created a button with the collapse effect and In that creating a simple table then I created an excel file and in that created a two table one display the button content and second table display the table content. when I run my code then an unlimited button is created and only 3 buttons display the data which I have stored in the table.
Here is my code:
import React, { useState } from 'react'
import { Table } from 'react-bootstrap'
import * as XLSX from 'xlsx'
import Accordion from './component/accordion'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faTrashAlt } from '#fortawesome/free-solid-svg-icons'
import './App.css'
function App() {
const[items, setItems] = useState([])
const readExcel=(file) => {
const promise = new Promise((resolve, reject)=>{
const fileReader = new FileReader();
fileReader.readAsArrayBuffer(file);
fileReader.onload=(e)=>{
const bufferArray = e.target.result;
const wb = XLSX.read(bufferArray, {type: "buffer"});
const wsname = wb.SheetNames[0];
const ws = wb.Sheets[wsname];
const data = XLSX.utils.sheet_to_json(ws);
resolve(data);
};
fileReader.onerror=(error) => {
reject(error);
};
});
promise.then((d)=>{
setItems(d);
console.log(d)
});
};
return(
<div className="container-fluid">
<section className="heading">
<h4>Products Details</h4>
<input type="file" className="input-field" name="Upload File" onChange={(e) =>{
const file=e.target.files[0];
readExcel(file);
}} />
</section>
{items.map((d) => (
<Accordion
title={
<tr key={d.ID} className="btn-heading">
<td style={{padding: "0px 36px"}}>{d.ID}</td>
<td style={{padding: "0px 16px"}}>{d.Mail}</td>
<td style={{padding: "0px 67px"}}>{d.Name}</td>
<td style={{padding: "0px 3px"}}>{d.PhoneNo}</td>
<td style={{padding: "0px 98px"}}>{d.City}</td>
<td style={{padding: "0px 6px"}}>{d.Date}</td>
<td style={{padding: "0px 120px"}}>{d.Time}</td>
</tr>
}
content={
<div>
<p className="header">
<span className="header-content">Shipping Address:</span>
292 Naqshband Colony. Near rabbania Mosque. Multan
</p>
<Table size="sm">
<thead>
<tr>
<th>#</th>
<th style={{width:"15%",textAlign:"center"}}>Article No</th>
<th style={{width:"30%"}}>Product Name</th>
<th style={{width:"20%" ,textAlign:"center"}}>Quantity</th>
<th style={{width:"15%" ,textAlign:"center"}}>Price</th>
<th style={{width:"15%" ,textAlign:"center"}}>Total Amount</th>
</tr>
</thead>
<tbody>
{items.map((d) => (
<tr key={d.ArticleNo}>
<colgroup>
<FontAwesomeIcon icon={faTrashAlt} />
</colgroup>
<td>{d.ArticleNo}</td>
<td style={{textAlign:"left"}}> {d.ProductName}</td>
<td>{d.Quantity}</td>
<td>{d.Price}</td>
<td>{d.TotalAmount}</td>
</tr>
))}
</tbody>
</Table>
</div>
}
/>
))}
</div>
);
}
export default App;
And here is my excel file which I have created two tables:
Excel File Tables
here is the output of my project the unlimited buttons:
Code Output

How to work with multiple inputs fields with .map - ReactJS

I have an assignment to make cryptocurrenty converter using API from coinmarketcap. I have manage to retrieve data and show everything but problem is that all fields act like one field.
You can see it here:
https://repl.it/repls/IncompatibleWhirlwindHarddrive
function App() {
const [data, setData] = useState("");
const [coinValue, setCoinValue] = useState("")
const [value, setValue] = useState("")
useEffect(() => {
let url = "https://cors-anywhere.herokuapp.com/https://sandbox-api.coinmarketcap.com/v1/cryptocurrency/listings/latest"
axios
.get(url,{
headers: {
'X-CMC_PRO_API_KEY': 'c8643baa-31bf-4d31-8868-af73ce84766b'
},
})
.then(result => setData(result.data.data));
}, []);
return (
<>
<table className="table ">
<thead>
<tr>
<th>Name</th>
<th>Short Name</th>
<th>$ Value</th>
<th>Last 24h</th>
<th>Amount you own</th>
<th>$ value of your coins</th>
</tr>
</thead>
<tbody>
{Array.isArray(data) &&
data.map(objects => {
let price = objects.quote.USD.price.toFixed(2)
let Result = (function() {
return price * coinValue
});
return (
<tr key={objects.name}>
<td>{objects.name}</td>
<td>
{objects.symbol}
</td>
<td onLoad={()=>setValue(price)}>
{price}
</td>
<td style={{color: objects.quote.USD.percent_change_24h > 0 ? "green" : "red"}}>{objects.quote.USD.percent_change_24h.toFixed(2)}</td>
<td>
<input required type="number" onChange={e => setCoinValue(e.target.value)} /> <br/>
<button className="btn" disabled={!coinValue} type="submit" onClick={Result}>Submit</button>
</td>
<td>
<Result></Result>
</td>
</tr>
);
})}
</tbody>
</table>
</>
);
}
export default App;
I need to every button be disabled until there is some value in input field but on input field that goes with that button.
Also I have to show conversion for only that field that input has value when you press submit.
Thank you in advance.

ReactJs function call and instead saw an expression no-unused-expressions

I'm trying to prepare a restfulpi at reactjs. But because I'm new to reactjs and I'm not very fluent in English, I have encountered a problem. the purpose of my application is to list the books of a publisher. you can access my code and error from below. I can do it if you help me. Thank you.
Error:
Line 21: Expected an assignment or function call and instead saw an expression no-unused-expressions
My Codes:
`` `
class App extends Component {
state = {
books:[]
}
componentWillMount(){
axios.get('http://localhost:3000/books').then(( response)=>{
this.setState({
books: response.data
})
});
}``
`` `
render() {
let books = this.state.books.map((book) =>
{
return
(
<tr key={book.id}>
<td>{book.id}</td>
<td>{book.title}</td>
<td>{book.rating}</td>
<td>
<Button color="success" size="sm" className="mr-2">Edit </Button>
<Button color="danger" size="sm">Sil</Button>
</td>
</tr>
)
});``
`` `
return (
<div className="App container">
<h1>Book List</h1><br></br>
<Table>
<thead>
<tr>
<th>#</th>
<th>Title</th>
<th>Rating</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{books}
</tbody>
</Table>
</div>
);``

Try this:
render() {
const books = this.state.books.map(book => {
return (
<tr key={book.id}>
<td>{book.id}</td>
<td>{book.title}</td>
<td>{book.rating}</td>
<td>
<Button color="success" size="sm" className="mr-2">
Edit{' '}
</Button>
<Button color="danger" size="sm">
Sil
</Button>
</td>
</tr>
);
});
return <tbody>{books}</tbody>;
}
According to this answer it is a common mistake in the render function.

You are missing the return statement in your render method.
render() {
....
...
return (
<tbody>
{books}
</tbody>
)
}