I am using an API to fetch some data. When the page loads it fetches some random data, but I want to allow the user to sort the data by clicking a button. I have made a function to sort these data from the API I am using. What I want to do now is: When the button to sort data is clicked, I want the new data to be replaced with the old data.
Here is my current code:
class Data extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
offset: 0, perPage: 12 // ignore these two
};
}
// The random data that I want to be displayed on page load
receivedData() {
axios
.get(`https://corona.lmao.ninja/v2/jhucsse`)
.then(res => {
const data = res.data;
const slice = data.slice(this.state.offset, this.state.offset + this.state.perPage) // ignore this
const postData = slice.map(item =>
<tr key={Math.random()}>
<td>{item.province}, {item.country}</td>
<td>{item.stats.confirmed}</td>
<td>{item.stats.deaths}</td>
<td>{item.stats.recovered}</td>
</tr>
)
this.setState({
pageCount: Math.ceil(data.length / this.state.perPage), // ignore this
postData
})
});
}
// The data to be sorted when the "country" on the table head is clicked
sortData() {
axios
.get(`https://corona.lmao.ninja/v2/jhucsse`)
.then(res => {
const data = res.data;
var someArray = data;
function generateSortFn(prop, reverse) {
return function (a, b) {
if (a[prop] < b[prop])
return reverse ? 1 : -1;
if (a[prop] > b[prop])
return reverse ? -1 : 1;
return 0;
};
}
// someArray.sort(generateSortFn('province', true))
const tableHead = <tr>
<th onClick={() => someArray.sort(generateSortFn('province', true))}>Country</th>
<th>Confirmed Cases</th>
<th>Deaths</th>
<th>Recovered</th>
</tr>
this.setState({
tableHead
})
});
}
componentDidMount() {
this.receivedData()
this.sortData() // This function should be called on the "Country - table head" click
}
render() {
return (
<div>
<table>
<tbody>
{this.state.tableHead}
{this.state.postData}
</tbody>
</table>
</div>
)
}
}
export default Data;
Think a litte bit different. In the componentDidMount get you're Data in some form. Set it with setState only the raw Data not the html. Then resort the data on button click. React rerenders if the state changes automatically
class Data extends React.Component {
constructor(props) {
super(props);
this.state = {
data
}
}
getData() {
fetchData('url').then(res) {
this.setState({data: res.data})
}
}
componentDidMount() {
this.getData()
}
sort() {
let newSorted = this.state.data.sort //do the sorting here
this.setState({data: newSorted})
}
render() {
return() {
<table>
<tablehead><button onClick={this.sort.bind(this)}/></tablehead>
{this.state.data.map(data => {
return <tablecell>{data.name}</tablecell>
})}
</table>
}
}
}
Related
Im creating a electron-react app and I'm using this boilerplate https://github.com/willjw3/react-electron
Im trying to fetch data from an API, Im able to get the data but im unable to update state using setState. componentDidMount is not firing as well. Am I setting something up wrong? Heres my code.
import React from "react"
import '../css/table.css'
const fs = window.require('fs');
const electron = window.require('electron')
const shell = electron.shell
const stockxAPI = window.require('stockx-api');
const stockX = new stockxAPI();
const scrapeStockx = (link, size) => {
let lowestAsk
return stockX.fetchProductDetails(link)
.then((response) => {
let productData = response.variants
//console.log(productData)
for (let product of productData){
if (product.size == size){
lowestAsk = product.market.lowestAsk
return '$' + lowestAsk
}
}
})
}
const fetchNewData = async (myProducts) => {
for (let product of myProducts){
let goatUrl = 'https://www.goat.com/web-api/v1/product_variants?productTemplateId='
let goatSKU = product.Goat[0].split('sneakers/')[1]
let ogUrl = goatUrl + goatSKU
let price = await scrapeStockx(product.Stockx[0], product.Size)
product.Stockx[1] = price
console.log('Product Size: ' + product.Stockx[1])
}
return myProducts
}
class ProductTable extends React.Component{
constructor(){
super()
this.state = {
Products : ''
}
this.renderTableData = this.renderTableData.bind(this)
this.updateProducts = this.updateProducts.bind(this)
}
async componentDidMount(){
this.setState({Products : 'Loading...'});
let myProducts = await this.updateProducts()
console.log('Component ' + myProducts)
this.setState({Products : myProducts})
console.log('Component' + this.state)
}
async updateProducts () {
let rawData = fs.readFileSync('/Users/yunioraguirre/Desktop/Lucky Cops Item Tracker V1/Lucky Item Tracker/MyProducts.json')
let myProducts = JSON.parse(rawData)
//Updates Goat and Stockx Prices
myProducts = await fetchNewData(myProducts)
try {
await fs.writeFileSync('MyProducts.json', JSON.stringify(myProducts, null, 2))
console.log('Success!')
console.log(myProducts)
} catch (error) {
console.log(error)
}
return myProducts
}
renderTableData = () => {
return this.state.Products.map( product => {
const {Id, Item, sku, Size, Sold, Goat, Stockx} = product
return (
<tr key={Id}>
<td>{Id}</td>
<td>{Item}</td>
<td>{sku}</td>
<td>{Size}</td>
<td>{product["Total Amount Paid"]}</td>
<td>{Sold}</td>
<td>{product['Price Sold For']}</td>
<td> {Goat[1]}</td>
<td> {Stockx[1]}</td>
<td> {product['Flight Club']}</td>
</tr>
)
})
}
renderTableHeader = () => {
console.log('State in Render' + JSON.stringify(this.state.Products))
let header = Object.keys(this.state.Products[0])
return header.map((key, index) => {
return <th key={index}>{key.toUpperCase()}</th>
})
}
render(){
return (
<div id='Table-Wrapper'>
<h1 id='TableTitle'>Total Products</h1>
<table id='Products Table'>
<tbody>
<tr>{this.renderTableHeader()}</tr>
{this.renderTableData()}
</tbody>
</table>
</div>
)
}
}
export default ProductTable
Heres what I get in the console
The issue is you provide an empty string as initial state. The first console log is from the render function and the second is from this.renderTableHeader. The problem happens when you hit this line: let header = Object.keys(this.state.Products[0])
Object.keys(""[0])
You may want to try creating a separate "isLoading" state, and conditionally render JSX on that.
this.state = {
Products : '',
isLoading: false,
}
...
async componentDidMount(){
this.setState({isLoading: true});
let myProducts = await this.updateProducts()
console.log('Component ' + myProducts)
this.setState({Products: myProducts, isLoading: false})
}
....
render(){
if (this.state.isLoading) {
return <div>Loading...</div>;
}
return (
<div id='Table-Wrapper'>
<h1 id='TableTitle'>Total Products</h1>
<table id='Products Table'>
<tbody>
<tr>{this.renderTableHeader()}</tr>
{this.renderTableData()}
</tbody>
</table>
</div>
)
}
I was able to fix my code. As Drew stated, I needed a isLoading variable in state so I could render and fetch my data. Heres my updated State and ComponentDidMount
class ProductTable extends React.Component{
constructor(){
super()
this.state = {
Products : '',
isLoading : true
}
this.renderTableData = this.renderTableData.bind(this)
this.updateProducts = this.updateProducts.bind(this)
}
async componentDidMount(){
let myProducts = await this.updateProducts()
console.log('Component ' + JSON.stringify(myProducts))
console.log('\n')
await this.setState({Products : myProducts, isLoading : false})
//console.log(JSON.stringify(this.state))
}
}
I'm using Datatable Library to draw table easily.
And I got a data with Fetch API and render to table and It works well. But I don't know why DataTable Funcions like sorting, searching, showing options.
As you see, get data from API and render to HTML are works well, but when I click sort or search function it changes to this.
Also Another functions like interval the data from API every 10 seconds and render to table are works well.
It seems that there are some problem in initial state.
import React, { Component } from 'react';
import './PostContainer.css';
class PostContainer extends Component {
constructor(props) {
super(props);
this.state = {
tableData: {
status: '0000',
data: {
loading: { sell_price: 'loading', volume_7day: 'loading' },
},
},
};
}
async componentDidMount() {
this.getData();
this.interval = setInterval(() => {
this.getData();
}, 10000);
}
getData() {
fetch('https://api.bithumb.com/public/ticker/all')
.then(res => {
const data = res.json();
return data;
})
.then(res => {
this.setState({
tableData: res,
});
})
.catch(error => {
console.error(error);
});
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
let data = this.state.tableData;
let chart = [];
console.log(data);
if (data.status === '0000') {
delete data.data['date'];
for (let [key, value] of Object.entries(data.data)) {
chart.push(
<tr key={key}>
<td>{key}</td>
<td>{value.sell_price}</td>
<td>{value.volume_7day}</td>
</tr>
);
}
} else if (
data.status === '5500' ||
data.status === '5600' ||
data.status === '5900'
) {
this.setState({
tableData: {
data: {
ERROR: {
sell_price: 'ERROR with API',
volume_7day: 'ERROR with API',
},
},
},
});
}
return (
<div className="Post">
<table id="table" className="table table-striped table-bordered">
<thead>
<tr>
<th>Coin Name</th>
<th>Current Price</th>
<th>Volume</th>
</tr>
</thead>
<tbody>{chart}</tbody>
</table>
</div>
);
}
}
export default PostContainer;
Can access to DEMO directly. I uploaded to Github Pages.
I can think of 2 issue to look for
a.
If you see in screenshot there is no Pagination.
When I try load DEMO with Developer Console open.
It works fine and you will see Pagination which will show 10 record at a time.
Check your code for Datatable initialization code in index.js
$('#table').DataTable({
order: [[1, 'desc']],
});
Make sure above code is called after Data is loaded in HTML
b.
Your state value is not updated to actual values while sorting
tableData: {
status: "0000",
data: {
loading: {
sell_price: "loading",
volume_7day: "loading"
}
}
}
I am sending a GET request on a Node API with a MongoDB server. I am getting the response as JSON in an array of object format. I want to show all those results in a list. Right now i am making a function like this
class VendorDashboard extends React.Component {
constructor() {
super();
this.state = {
paginationValue: '86',
title: ""
}
this.handleLogout = this.handleLogout.bind(this);
this.gotoCourse = this.gotoCourse.bind(this);
}
componentDidMount() {
axios.get('/vendor/showcourses') //the api to hit request
.then((response) => {
console.log(response);
let course = [];
course = response.data.map((courseres) => {
this.setState({
title: courseres.title
});
})
});
Right now what is happening is it is showing just one result. I want to show all results on that api. How can i do it?
This segment here is overriding the title per course.
course = response.data.map((courseres) => {
this.setState({
title: courseres.title
});
})
You can keep the state as an array of titles and do;
course = response.data.map((courseres) => {
return courseres.title;
})
this.setState({titles: course});
And then you can repeat on the array of titles in your component.
Like so in the render method;
const { titles } = this.state;
return <div>{titles.map((title, index) => <div key={index}>{title}</div>)}</div>
You need to collect all the server response and set that as an array of data to the state and use this state data to render:
class VendorDashboard extends React.Component {
constructor() {
super();
this.state = {
paginationValue: '86',
course: []
}
this.handleLogout = this.handleLogout.bind(this);
this.gotoCourse = this.gotoCourse.bind(this);
}
componentDidMount() {
axios.get('/vendor/showcourses') //the api to hit request
.then((response) => {
const course = response.data.map((courseres) => ({
id: courseres.id,
title: courseres.title
}));
this.setState({
course
});
});
}
render() {
return (
<ul>
{
this.state.course.map((eachCourse) => {
return <li key={eachCourse.id}>{eachCourse.title}</li>
})
}
</ul>
)
}
}
In each map iteration you rewrite your piece of state, it is wrong.
Just put courses in your state:
console.log(response);
this.setState({ courses: response.data });
In render method go through your state.courses:
render(){
return(
<div>
{this.state.courses.map(course => <h2>{course.title}</h2>)}
</div>
);
}
Try show in table my array. Array get from AJAX request in Action. I'm using Redux
class IncomeProfile extends Component {
constructor(props) {
super(props)
}
componentDidMount() {
this.props.IncomeListProfile();
}
render() {
var elems = this.props.items.course_list;
console.log(elems);
return (
<div>
<table>
{elems.map((item) => (
<tr key={item.course_id}>
<td>{item.name}</td>
</tr>
))}
</table>
</div>
)
}
}
const mapDispatchToProps = function(dispatch) {
return {
IncomeListProfile: () => dispatch(IncomeProfileList())
}
}
const mapStateToProps = function(state) {
var mystore = state.toArray();
//console.log(mystore[6]);
return {
items: mystore[6]
};
}
export default connect(mapStateToProps, mapDispatchToProps)(IncomeProfile);
Console.log first print "undefined" then it print this:
Try add condition in render method if (elems) { } not helps
Make use of the following
var elems = this.props.items['course_list'];
var copy = Object.assign({}, elems);
console.log(elems.course_list);
This question already has answers here:
Why does calling react setState method not mutate the state immediately?
(9 answers)
Closed 6 years ago.
I am working on this FreeCodeCamp leaderboard table and and when clicking in the highlighted table header the application calls either this url https://fcctop100.herokuapp.com/api/fccusers/top/recent or this one https://fcctop100.herokuapp.com/api/fccusers/top/alltime thus sorting between campers with the highest points for the past 30 days or all time.
My issue here is that I have to click twice in order to get the desired results. In the CamperLeaderboard component handleSort function when I console.log the state does not change until I have clicked twice
Click Once
handleSort = (sort) => {
console.log(sort); // alltime
console.log(this.state.sort) //recent
this.setState({ sort: sort });
console.log(this.state.sort) //recent
this.getData();
};
Click Twice
handleSort = (sort) => {
console.log(sort); // alltime
console.log(this.state.sort) //alltime
this.setState({ sort: sort });
console.log(this.state.sort) //alltime
this.getData();
};
This is the CodePen preview and below is the full code
/**
Table body component
*/
class Table extends React.Component {
handleSort = (e, sort) => {
this.props.handleSort(sort);
};
renderCampers = (key, count) => {
const camper = this.props.campers[key];
return(
<tr key={key}>
<td>{count}</td>
<td>
<a href={`https://www.freecodecamp.com/${camper.username}`} target='_blank'>
<img src={camper.img} />
{camper.username}
</a>
</td>
<td className='center'>{camper.recent}</td>
<td className='center'>{camper.alltime}</td>
</tr>
)
};
render() {
let count = 0;
return (
<div>
<table>
<caption>Leaderboard</caption>
<tr>
<th>#</th>
<th>Camper Name</th>
<th onClick={(e) => this.handleSort(e, 'recent')}><a href='javascript:void(0)'>Points in the past 30 days</a></th>
<th onClick={(e) => this.handleSort(e, 'alltime')}><a href='javascript:void(0)'>All time points</a></th>
</tr>
{Object.keys(this.props.campers).map(key => {
count++;
return this.renderCampers(key, count);
})}
</table>
</div>
);
}
}
/**
Container
*/
class CamperLeaderboard extends React.Component {
state = {
campers: [],
sort: 'recent'
};
getData() {
let url = `https://fcctop100.herokuapp.com/api/fccusers/top/${this.state.sort}`
const self = this;
axios.get(url)
.then(function (response) {
self.setState({ campers: response.data });
//console.log(self.state.campers);
})
.catch(function (error) {
console.log(error);
});
}
componentWillMount() {
this.getData();
}
handleSort = (sort) => {
this.setState({ sort: sort });
this.getData();
};
render() {
return (
<div>
<p>Click links in table header to sort</p>
<Table campers={this.state.campers}
handleSort={this.handleSort} />
</div>
);
}
}
ReactDOM.render(<CamperLeaderboard />, document.getElementById('app'));
/*
To get the top 100 campers for the last 30 days: https://fcctop100.herokuapp.com/api/fccusers/top/recent.
To get the top 100 campers of all time: https://fcctop100.herokuapp.com/api/fccusers/top/alltime.
*/
I believe #finalfreq's explanation is correct and this is how to fix it.
Update handleSort method of the CamperLeaderboard class like this:
handleSort = (sort) => {
this.setState({ sort: sort });
// You don't need to read sort from state. Just pass it :)
this.getData(sort);
}