We Keep Coding

fetch json in react js

//CODE
import React, { Component } from "react";
import ReactDOM from "react-dom";
import ColumnResizer from "column-resizer";
import "./table.css"
import axios from "axios";
class ReactTable extends Component {
constructor(props) {
super(props);
this.tableSelector = "#somethingUnique";
this.state = {
Data: [],
Data1: [],
error: '',
image: [],
}
}
//Fetching Api through LocalHost8080
getFetchData() {
axios.get(' /AmpRestAPI/webresources/getPCRList/all',
{
headers: {
'Access-Control-Allow-Origin': '*',
},
auth: {
username: 'admin',
password: 'password'
}
})
.then(async (response) => {
console.log(response.data);
this.setState({ Data: response.data });
}).catch(error => {
this.setState({ error: 'unable to fetch URL' });
console.log(error.response);
});
}
componentDidMount() {
if (this.props.resizable) {
this.enableResize();
this.getFetchData();
}
}
componentWillUnmount() {
if (this.props.resizable) {
this.disableResize();
}
}
componentDidUpdate() {
if (this.props.resizable) {
this.enableResize();
}
}
UNSAFE_componentWillUpdate() {
if (this.props.resizable) {
this.disableResize();
}
}
enableResize() {
const options = this.props.resizerOptions;
if (!this.resizer) {
this.resizer = new ColumnResizer(
ReactDOM.findDOMNode(this).querySelector(`${this.tableSelector}`),
options
);
} else {
this.resizer.reset(options);
}
}
disableResize() {
if (this.resizer) {
this.resizer.reset({ disable: true });
}
}
render() {
const { Data, error } = this.state
return (
<div>
<div className="container-fluid pt-3">
<table id="somethingUnique" cellSpacing="0" className="border-primary">
<thead>
<tr>
<th>Thumbnail</th>
<th >ChannelName
</th>
<th>Duration
</th>
<th>
thEndTime
</th>
<th>LoadedClip</th>
<th>Start Time</th>
<th>CurrentTimeStamp
</th>
</tr>
</thead>
<tbody>
{Data.length ?
Data.map((val, index) => {
//flitter
const filterValue = this.props.filterValue;
const emplogin = val.ChannelName.toLowerCase();
// const emptype = emp.type;
if (((!filterValue) || (emplogin.indexOf(filterValue) !== -1))) {
return (
<tr key={index}>
<td>
{this.state.image ? <img src={`data:image/jpeg;base64,${val.Thumbnail}`} alt="Clip Thumbnail" width="100%" height="100%" /> : ''}
</td>
<td>
{val.ChannelName}
</td>
<td>{val.Duration} </td>
<td> {val.EndTime}
</td>
<td>
{val.LoadedClip}
</td>
<td>
{val.StartTime}
</td>
<td>
{val.CurrentTimeStamp}
</td>
</tr>
)
}
return true;
}
) : null
}
</tbody>
</table>
{
error ? <div className="text-center pt-4"><h5>{error}</h5></div> : null
}
</div >
</div >
);
}
}
export default ReactTable;
I want to fetch both PCR1 and PCR2 without using a spread operator. If the admin added PCR3 then that part also be displayed in a Web browser. See in the given name(Console Image). If the admin Added more PCR then how to fetch that data .please help
I did this.setState({ Data: response.data }); to show PCR1 AND PCR2 in Table but not able to display.
**without using Spread Operator this.setState({Data: [...response.data.PCR1, ...response.data.PCR2]});** thanks in advance
[1]: https://i.stack.imgur.com/VkZDw.png
I did this.setState({ Data: response.data }); to show PCR1 AND PCR2 in Table but not able to display.
without using Spread Operator this.setState({Data: [...response.data.PCR1, ...response.data.PCR2]}); thanks in advance I did this.setState({ Data: response.data }); to show PCR1 AND PCR2 in Table but not able to display.
without using Spread Operator this.setState({Data: [...response.data.PCR1, ...response.data.PCR2]}); thanks in advance

Try this:
this.setState({Data: [...Object.values(response.data).flat()]});

Why does my reactstrap Collapse not reflect my initial or changed state

I am trying to use reactstrap's Collapse to collapse two alternating sections.
import React, { Component, Fragment, Suspense } from "react";
import ReactDOM from 'react-dom';
import { PDFViewer } from '#react-pdf/renderer'
import NewWindow from 'react-new-window'
import Config from 'config';
import { Button, Collapse } from 'reactstrap';
import { formatter } from '../common.js'
import { format } from 'date-fns';
import Pagination from '../Pagination';
import "./Order.css";
import Modal from 'react-modal';
import PaymentModal from './paymentModal.js';
import Invoice from './Reports/Invoice';
Modal.setAppElement('#root');
let PageSize = 25;
class Portal extends React.Component {
constructor() {
super();
this.state = {
name: 'React',
apiData: [],
currentPage: 1,
currentTableData: [],
orderList: [],
isOpen: false,
pdfView: null,
viewInvoices: true,
viewOrders: false
};
}
showInvoices() {
console.log("Show Invoices Clicked")
this.setState({ viewInvoices: true });
this.setState({ viewOrders: false });
}
showOrders() {
console.log("Show Orders Clicked")
this.setState({ viewInvoices: false });
this.setState({ viewOrders: true });
}
async componentDidMount() {
console.log('app mounted');
const tokenString = sessionStorage.getItem("token");
const token = JSON.parse(tokenString);
let headers = new Headers({
"Accept": "application/json",
"Content-Type": "application/json",
'Authorization': 'Bearer ' + token.token
});
const response = await fetch(Config.apiUrl + `/api/Orders/GetAllInvoices`, {
method: "GET",
headers: headers
});
const json = await response.json();
console.log(json);
this.setState({ orderList: json });
}
componentDidUpdate(_, prevState) {
console.log('Component Updated');
if (prevState.currentPage !== this.state.currentPage || prevState.orderList !== this.state.orderList) {
const firstPageIndex = (this.state.currentPage - 1) * PageSize;
const lastPageIndex = firstPageIndex + PageSize;
this.setState({ currentTableData: this.state.orderList.slice(firstPageIndex, lastPageIndex) });
}
}
render() {
const orders = this.state.orderList;
const currentTableData = this.state.currentTableData;
const { isOpen } = this.state;
let onRequestClose = () => {
this.setState({ isOpen: false });
}
let handleClick = () => {
console.log("Clicked")
this.setState({ isOpen: true });
}
function handleInvoiceClick(e, invoice) {
e.preventDefault();
console.log(`invoice: ${JSON.stringify(invoice)}`)
if (this.state.pdfView === null) {
const headerString = sessionStorage.getItem("header");
const header = JSON.parse(headerString);
const buff = new Buffer(header.logoImage, 'base64');
let pdf = (
<PDFViewer width="1000" height="600" className="portal">
<Invoice invoice={invoice} buff={buff} />
</PDFViewer>
);
this.setState({ pdfView: pdf });
} else {
this.setState({ pdfView: null });
}
}
handleInvoiceClick = handleInvoiceClick.bind(this);
return (
<div id="bootstrap-overrides">
<h2>Portal</h2>
<div className="row">
<div className="block col-1">
<p><button onClick={this.showInvoices.bind(this)}>Invoices</button></p>
<p><button onClick={this.showOrders.bind(this)}>Orders</button></p>
</div>
<div className="block col-2">
<br />
{this.state.pdfView}
<Collapse isOpen={this.state.showInvoices}>
<h3>Open Invoices</h3>
<h4>A list of completed orders purchased under this account.</h4>
<table className="table table-striped table-bordered">
<thead>
<tr>
<th className="number">Invoice Number</th>
<th className="date">Invoice Date</th>
<th className="date">Due Date</th>
<th className="amount">Total</th>
<th className="customer">Ship To</th>
<th className="date">Actual Ship Date</th>
<th className="button"></th>
</tr>
</thead>
<tbody>
{currentTableData && currentTableData.map(order =>
<>
<tr key={order.sopnumbe}>
<td><a href="#" onClick={(e) => handleInvoiceClick(e, order)}>{order.sopnumbe}</a></td>
<td>{format(Date.parse(order.invodate), 'MM/dd/yyyy')}</td>
<td>{format(Date.parse(order.duedate), 'MM/dd/yyyy')}</td>
<td>{formatter.format(order.docamnt)}</td>
<td>{order.custname}</td>
<td>{format(Date.parse(order.actlship), 'MM/dd/yyyy')}</td>
<td><Button className="BtnPay" onClick={handleClick}>Pay</Button></td>
</tr>
{isOpen ? <PaymentModal invoice={order} onRequestClose={onRequestClose} /> : null}
</>
)}
</tbody>
</table>
<Pagination
className="pagination-bar"
currentPage={this.state.currentPage}
totalCount={orders.length}
pageSize={PageSize}
onPageChange={page => this.setState({ currentPage: page })}
/>
</Collapse>
<Collapse isOpen={this.state.showOrders}>
<h3>Open Orders</h3>
<h4>A list of completed orders purchased under this account.</h4>
</Collapse>
</div>
</div>
</div>
);
}
}
export default Portal;
The isOpen doesn't seem to be reading my state. The Portal loads with both sections collapsed. My two buttons run (I get a console log entry for both) but don't effect the display. I would think the initial Invoice should be open as well. Why does my reactstrap Collapse element not reflect my initial or changed state? Do I need to add anything to componentDidUpdate? Any tips or advice will be appreciated.
reactstrap = reactstrap#9.0.1

I think you are using the wrong variables
<Collapse isOpen={this.state.showInvoices}>
<Collapse isOpen={this.state.showOrders}>
should be
<Collapse isOpen={this.state.viewInvoices}>
<Collapse isOpen={this.state.viewOrders}>
The show.. ones are the functions. The isOpen expects a boolean value

How to implement pagination in React.js?

I am learning React js and this might sound like a newbie question. I am trying to implement a paginate function in react js from an API data. I am not sure how to implement the logic though. I have passed on props like the page size, current page and the data that needs to be rendered. Here is my code:
App.js
import React, { Component } from 'react'
import Result from './Result';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import Navbar from 'react-bootstrap/Navbar'
import Card from './Card';
import Loading from './Loading'
import Paginate from './Paginate';
export default class App extends Component {
constructor(){
super();
this.state = {
data: [],
totalData:[],
searchText:'',
searchResult:[],
isSearch:false,
isLoading:true,
pageSize:15,
currentPage:1
}
this.onSearchChange=this.onSearchChange.bind(this);
this.handlePageChange=this.handlePageChange.bind(this);
}
onSearchChange= (e) =>{
console.log("search change "+this.state.searchText)
this.setState({
searchText:e.target.value,
isSearch:true
})
console.log("api data"+this.state.data[0])
}
/* fetchSearchResult= () =>{
console.log(this.state.searchText)
console.log("inside fetch")
let store= this.state.data.map(item=>{
let {country}=item
return(country)
})
console.log(store)
var areEqual = store.includes(this.state.searchText);
console.log(this.state.areEqual)
return (areEqual)?
store:'not matched'
// return store;
} */
componentDidMount() {
const url =
'https://corona.lmao.ninja/countries?sort=country'
fetch(url)
.then(result => result.json())
.then(result => {
this.setState({
data: result.reverse(),
isLoading:false
})
})
const totalUrl =
'https://corona.lmao.ninja/all'
fetch(totalUrl)
.then(result => result.json())
.then(result => {
//let store=result;
//console.log("store data"+store)
this.setState({
totalData: result
})
console.log("2nd fetched data"+this.state.totalData)
})
}
handlePageChange= (page) =>{
this.setState({
currentPage:page
})
}
render() {
return (
this.state.isLoading?<Loading/>:
<div id="main">
<Navbar bg="dark" variant="dark">
<Navbar.Brand href="#home">
<Button id="live_text"
>Live</Button>
<img
alt=""
src="/logo.svg"
width="100"
height="30"
className="d-inline-block align-top"
/>{' '}
Covid-19 dashboard
{this.state.curTime}
</Navbar.Brand>
</Navbar>
<Form.Group>
<Form.Label>Search</Form.Label>
<Form.Control value={this.state.searchText}onChange={this.onSearchChange} type="text" placeholder="Enter country" />
</Form.Group>
<Card totalData={this.state.totalData}/>
<Paginate
dataCount={this.state.data.length}
pageSize={this.state.pageSize}
onPageChange={this.handlePageChange}
currentPage={this.state.currentPage}/>
<Result data={this.state.data}
toSearch={this.state.searchText}
searchCheck={this.state.isSearch}
searchValue={this.state.searchText}/>
</div>
)
}
}
Paginate.js
import React from 'react'
import _ from 'lodash'
export default function Paginate(props) {
const {pageSize, dataCount, onPageChange, currentPage}=props;
console.log("current page"+currentPage)
const pagesCount=Math.ceil(dataCount/pageSize);
const pages=_.range(1,pagesCount+1);
return (
<div>
<nav aria-label="...">
<ul class="pagination">
{pages.map((page)=>{
return(
<li key={page}class={(page===currentPage)?"page-item active":"page-item"}>
<a class="page-link" href="#" onClick={()=>onPageChange(page)}>{page}</a>
</li>
)
})}
</ul>
</nav>
</div>
)
}
Result.js
import React from 'react'
import Table from 'react-bootstrap/Table';
const Result = (props) => {
console.log('props value is:'+props.data)
let {searchCheck, searchValue}=props;
let update=props.data.map((item)=>{
const { countryInfo, country, cases, deaths, recovered, active, casesPerOneMillion} = item;
return(
(searchCheck)?country.toUpperCase().includes(searchValue.toUpperCase())?
<tbody>
<tr key={countryInfo._id}>
<td><img style={{height:'25px',width:'50px'}}src={countryInfo.flag}/></td>
<td>{country}</td>
<td>{cases}</td>
<td>{active}</td>
<td>{recovered}</td>
<th>{casesPerOneMillion}</th>
<td>{deaths}</td>
</tr>
</tbody>:
'':
<tbody>
<tr key={countryInfo._id}>
<td><img style={{height:'25px',width:'50px'}}src={countryInfo.flag}/></td>
<td>{country}</td>
<td>{cases}</td>
<td>{active}</td>
<td>{recovered}</td>
<th>{casesPerOneMillion}</th>
<td>{deaths}</td>
</tr>
</tbody>
)
})
return (
<div>
<Table striped bordered hover variant="dark">
<thead>
<tr>
<th>Flag</th>
<th>Country</th>
<th>Cases</th>
<th>Active</th>
<th>Recovered</th>
<th>Cases per one Million</th>
<th>Deaths</th>
</tr>
</thead>
{update}
</Table>
</div>
)
}
export default Result;
Codesandbox live

In my solution, I am fetching the required records from data based on page no and storing them in a new array( as a state) and passing them to Result.js
Tips: Use the key in Result.js at the top level of children in Result.js you are using the key at the tag instead of that you need to you it on
App.js
import React, { Component } from "react";
import Result from "./Result";
import Paginate from "./Paginate";
export default class App extends Component {
constructor() {
super();
this.state = {
data: [],
totalData: [],
searchText: "",
searchResult: [],
isSearch: false,
isLoading: true,
pageSize: 15,
currentPage: 1,
dataToShow: []
};
this.onSearchChange = this.onSearchChange.bind(this);
this.handlePageChange = this.handlePageChange.bind(this);
}
onSearchChange = e => {
this.setState({
searchText: e.target.value,
isSearch: e.target.value === "" ? false : true
});
};
/* fetchSearchResult= () =>{
console.log(this.state.searchText)
console.log("inside fetch")
let store= this.state.data.map(item=>{
let {country}=item
return(country)
})
console.log(store)
var areEqual = store.includes(this.state.searchText);
console.log(this.state.areEqual)
return (areEqual)?
store:'not matched'
// return store;
} */
componentDidMount() {
const url = "https://corona.lmao.ninja/countries?sort=country";
fetch(url)
.then(result => result.json())
.then(result => {
this.setState({
data: result.reverse(),
dataToShow: result.slice(0, 15),
isLoading: false
});
});
const totalUrl = "https://corona.lmao.ninja/all";
fetch(totalUrl)
.then(result => result.json())
.then(result => {
// let store=result;
// console.log("store data"+store)
this.setState({
totalData: result
});
});
}
handlePageChange = page => {
const { data, pageSize } = this.state;
this.setState({
currentPage: page,
dataToShow: data.slice(pageSize * (page - 1), pageSize * (page - 1) + 15)
});
};
render() {
const {
searchText,
data,
pageSize,
currentPage,
isSearch,
dataToShow
} = this.state;
return (
<div id="main">
<input
value={searchText}
onChange={this.onSearchChange}
type="text"
placeholder="Enter country"
/>
<Paginate
dataCount={data.length}
pageSize={pageSize}
onPageChange={this.handlePageChange}
currentPage={currentPage}
/>
<Result
data={isSearch ? data : dataToShow}
toSearch={searchText}
searchCheck={isSearch}
searchValue={searchText}
/>
</div>
);
}
}
Paginate.js
import React from "react";
export default function Paginate(props) {
const { pageSize, dataCount, onPageChange } = props;
const pagesCount = Math.ceil(dataCount / pageSize);
const Pages = new Array(pagesCount).fill(0);
// const Pages = [1,2,3,5]
return (
<div>
<nav aria-label="...">
{Pages.map((element, index) => (
<button
key={index}
type="button"
onClick={() => onPageChange(index + 1)}
>
{index + 1}
</button>
))}
</nav>
</div>
);
}
Result.js
import React from "react";
const Result = props => {
const { searchCheck, searchValue } = props;
const update = props.data.map(item => {
const {
countryInfo,
country,
cases,
deaths,
recovered,
active,
casesPerOneMillion
} = item;
return searchCheck ? (
country.toUpperCase().includes(searchValue.toUpperCase()) ? (
<tbody key={countryInfo._id}>
<tr>
<td>
<img
style={{ height: "25px", width: "50px" }}
src={countryInfo.flag}
/>
</td>
<td>{country}</td>
<td>{cases}</td>
<td>{active}</td>
<td>{recovered}</td>
<th>{casesPerOneMillion}</th>
<td>{deaths}</td>
</tr>
</tbody>
) : (
""
)
) : (
<tbody key={countryInfo._id}>
<tr>
<td>
<img
style={{ height: "25px", width: "50px" }}
src={countryInfo.flag}
/>
</td>
<td>{country}</td>
<td>{cases}</td>
<td>{active}</td>
<td>{recovered}</td>
<th>{casesPerOneMillion}</th>
<td>{deaths}</td>
</tr>
</tbody>
);
});
return (
<div>
<table>
<thead>
<tr>
<th>Flag</th>
<th>Country</th>
<th>Cases</th>
<th>Active</th>
<th>Recovered</th>
<th>Cases per one Million</th>
<th>Deaths</th>
</tr>
</thead>
{update}
</table>
</div>
);
};
export default Result;

React Js Can not delete record from API

I am failing to delete the clients from the API, i expected to click on Onclick button and the data should be deleted from the database:
Using the onclick button, the data should be deleted:
import React, { useRef } from 'react'
import ReactToPrint from 'react-to-print'
import { Table, Button } from 'react-bootstrap'
const Hello = () => {
alert('Name, Description, Start Date, End Date, Validity, Status')
}
class clientview extends React.Component {
constructor (props) {
super(props)
this.state = {
error: null,
clients: []
}
this.deleteTask = this.deleteTask.bind(this)
}
componentDidMount () {
const url = 'http://localhost:3001/clients/sel_all'
fetch(url)
.then(res => res.json())
.then(
result => {
console.log(result)
this.setState({
clients: result.data
})
},
error => {
this.setState({ error })
}
)
}
deleteTask (id, url = 'http://localhost:3001/clients/delete') {
return fetch(url + '/' + id, { method: 'DELETE' }).then(response =>
response.json()
)
}
render () {
const { error, clients, props } = this.state
if (error) {
return <div> Error:{error.message}</div>
} else {
return (
<div>
<h2>All Clients</h2>
<Table>
<thead>
<tr>
<th>No</th>
<th>Client Name</th>
<th>Client Address</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
{clients.map(client => (
<tr key={client.id}>
<td>{client.id}</td>
<td>{client.name}</td>
<td>{client.address}</td>
<td>{client.comment}</td>
<td>
<button onClick={Hello}>View Contract</button>
<button>
<ReactToPrint
trigger={() => <button>print</button>}
content={() => this.componentRef}
/>
</button>
<button
onClick={() => {
props.editRow(client)
}}
className='button'
>
Edit
</button>
</td>
<button
onClick={() => {
this.deleteTask.bind(this)
}}
>
Dele
</button>
</tr>
))}
</tbody>
</Table>
</div>
)
}
}
}
export default clientview

React Js Form Not Displaying Output

I did an input for an offline application form using React and built a view to display the form, but the view seems to keep giving error, i can't seem to identify it
Here is the code for the view:
import React from 'react'
export default class GradeData extends React.Component {
constructor (props) {
super(props)
this.state = {grades: []}
this.schoolDb = this.props.schoolDb
}
componentDidMount () {
this.updateGrades()
this.schoolDb.changes({
since: 'now',
live: true
}).on('change', (change) => {
this.updateGrades()
}).on('error', (err) => {
console.error(err)
})
}
updateGrades () {
this.schoolDb.allDocs({include_docs: true}).then((res) => {
var grades = res.rows.map((row) => row.grade)
this.setState({grades})
})
}
render () {
return (
<div className='eidsr-data'>
<div className='eidsr-data__header'>
<h3 className='eidsr-data__title'>Grades Overview</h3>
</div>
<div className='table-list'>
<table>
<thead>
<tr>
<th>Student ID</th>
<th>Semester</th>
<th>Period</th>
</tr>
</thead>
<tbody>
{this.state.grades.map((grade) => <DataRow key={grade._id} grade={grade} {...this.props} />)}
</tbody>
</table>
</div>
</div>
)
}
}
class DataRow extends React.Component {
render () {
let {grade} = this.props
return (
<tr >
<td>{grade.GradeInfo['studentID']}</td>
<td>{grade.GradeInfo['semester']}</td>
<td>{grade.GradeInfo['period']}</td>
</tr>
)
}
}
Here is the code for the form:
import React from 'react'
import GradeInfo from 'GradeInfo'
import {setUsers, getUsers, filterUsers} from 'UsersApi'
import UserList from 'UserList'
export default class GradeForm extends React.Component {
constructor (props) {
super(props)
this.state = {
grade: getUsers()
}
this.submitInfo = this.submitInfo.bind(this)
}
componentDidUpdate () {
setUsers(this.state.grade)
}
submitInfo (event) {
event.preventDefault()
let gradeInfo = Object.assign({}, this.props.grade)
this.setState({
grade: [
...this.state.grade,
{gradeInfo}
]
})
this.props.clearCurrentGrade()
}
render () {
let {
grade,
edit,
updateGrade,
updateGradeState,
} = this.props
return (
<div className='row'>
<div className='columns large-centered large-12 medium-12'>
<div className='form'>
<div className='container'>
<form action='' onSubmit={this.submitInfo}>
<div className='student-form__container'>
<GradeInfo edit={edit} handleChange={updateGrade('GradeInfo')} {...grade.GradeInfo} />
<button className='button expanded' type='submit'>Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
)
}
}