im doing a project of crypocurrency site , and ive managed to show up the graph some times , but im facing a problem that my graph wont show up in the first run ,
i think its because i cant get the info at the start correct,and i know that the linechart in the return is making this problem
you got any idea how to fix it?
app.js
function App() {
var [details, setDetails] = useState();
var [details2, setDetails2] = useState();
console.log("!2");
var o = [] // empty Object
var price = 0;
var date = "";
var i = 1;
var array = "";
const [data,setData]=React.useState(null);
const [userData, setUserData] = useState({});
useEffect(() => {
fetch('http://localhost:3002/bitcoin').then((response)=> response.json())
.then((data)=>
{
console.log(data);
var years = data.map(value => value[0]);
var prices1 = data.map(value2 => value2[1]);
console.log(years);
console.log(prices1);
setUserData({
labels: years,
datasets: [
{
label: "Price",
data: prices1,
backgroundColor: [
"rgba(75,192,192,1)",
],
borderColor: "black",
borderWidth: 2,
},
],
});
})
})
return (
<div className="App">
<h1>fedgfdsgs</h1>
<LineChart chartData={userData} />
</div>//the line chart is causing the problem but without it i cant show my graph
);
}
export default App;
linechart.js
function LineChart({ chartData }) {
return <Line data={chartData} />;
}
export default LineChart;
thank u for your time :)
Related
I try to fill a React DataGrid with data from a JSON provided by node backend.
The backend code looks as follows:
app.get("/articles", (req, res) => {
res.json([
{
"title":"Test Article One",
"timestamp":"09-01-2023",
"text":"Test text one"
},
{
"title":"Test Article Two",
"timestamp":"10-01-2023",
"text":"Test text two"
},
{
"title":"Test Article Three",
"timestamp":"11-01-2023",
"text":"Test text three"
}])
})
The React code looks as follows:
const MemberPage = () => {
const [articles, setArticles] = useState([])
const [articleKeys, setArticleKeys] = useState([])
useEffect(() => {
fetch("http://localhost:3001/articles")
.then((res) => res.json())
.then((data) => {
setArticles(data)
setArticleKeys(Object.keys(data[0]))
})
})
return (
<div id="memberpage-main-container">
<DataGrid columns={articleKeys} rows={articles} />
</div>
)
}
I get the error message TypeError: null is not an object (evaluating 'measuringCell.getBoundingClientRect') in the browser console and the page wouldn't render. I first thought, it is because the DataGrid is rendered before the useEffect fetches the data which I've red in other answers, however, when I write:
const articleKeys = []
const articles = []
it works (I'm mean, it's an empty page then, but I don't get any errors). So, I would expect it not to be a problem when setting useState([]).
Any help is appreciated.
So, I've found a solution by switching from react-data-grid to #mui/x-data-grid.
The code now looks as follows:
import React, { useState, useEffect } from "react"
import { DataGrid } from "#mui/x-data-grid"
const MemberPage = () => {
const [articles, setArticles] = useState([])
const [articleKeys, setArticleKeys] = useState([])
function parseArticleKeys(keys) {
let tableColumns = []
for (let i = 0; i < keys.length; i++) {
tableColumns.push({field: keys[i], headerName: keys[i], width: 300})
}
return tableColumns
}
useEffect(() => {
fetch("http://localhost:3001/articles")
.then((res) => res.json())
.then((data) => {
setArticles(data)
setArticleKeys(Object.keys(data[0]))
})
})
return (
<div id="memberpage-news-container">
<DataGrid columns={parseArticleKeys(articleKeys)} rows={articles} />
</div>
)
}
export default MemberPage
I tried a similar thing with react-data-grid but couldn't get it to work. If someone has an idea to accomplish that with react-data-grid, it still might be helpful for others but I personally am ok with that solution.
I have created a generic component to be used in 2 cases. 1 case when dealing with single piece of data the other when dealing with an array of data. I am trying to plot this data on a react leaflet map. Right now it works for my landingPage component which deals with the single plots of data.
Previously I had it also working for my array of data before I was passing props to generic component to render. The issue is when I try to load the page responsible for displaying the map with the array of data it returns null when the getInitPosition() function is called as the props data seems to be null when component is rendered but not null after it, I checked this through logging to console. I am confused as to how it works in the single component and not the array of data component as the calls to retrieve the data are very similar. Can anyone see where I am going wrong. It seems to be that although my polyineArray is set with correct values I then print out the polylines state to check if it is set after the call to setPolylines(polylineArray) but it seems to be empty and I do not know why?
Map array of data component:
import react from 'react';
import { useState, useEffect} from 'react';
import { MapContainer, TileLayer, Popup, Polyline} from 'react-leaflet';
import axios from 'axios';
import polyline from '#mapbox/polyline';
import MapComp from './MapComp';
function Mapp() {
const [activities, setActivities] = useState([]);
const [polylines, setPolylines] = useState([]);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
setActivitieData();
}, [])
useEffect(() => {
if(activities.length) {
setPolylineArray();
setIsLoading(false);
}
}, [activities])
const getActivityData = async () => {
const response = await axios.get(
"http://localhost:8800/api/"
);
return response.data;
};
const setActivitieData = async () => {
const activityData = await getActivityData();
setActivities(activityData);
};
const setPolylineArray = () => {
const polylineArray = []
for(let i = 0; i < activities.length; i++) {
const polylineData = activities[i].map.summary_polyline;
const activityName = activities[i].name;
const activityType = activities[i].type
polylineArray.push({positions: polyline.decode(polylineData), name: activityName, activityType: activityType });
} // should push activity type as well
setPolylines(polylineArray);
//setIsLoading(false);
console.log("Polyline array = ", polylineArray);
console.log("polylines = ", polylines) // this seems to be empty????
}
return (
!isLoading ?
<MapComp activityData={{polylines}} />
: <div><p>Loading...</p></div>
)
}
export default Mapp;
single data plotting component which works:
import react from 'react';
import { useState, useEffect } from 'react';
import Card from './Card';
import axios from 'axios';
import polyline from '#mapbox/polyline';
function LandingPage() {
const [cardActivites, setCardActivities] = useState([]);
const [polylines, setPolylines] = useState([]);
const [cards, setCards] = useState([]);
useEffect(() => {
setActivitieData();
}, [])
useEffect(() => {
if(cardActivites.length) {
setPolylineArray();
activityCards();
}
}, [cardActivites])
const getActivityData = async () => {
const response = await axios.get(
"http://localhost:8800/api/"
);
return response.data;
};
const setActivitieData = async () => {
const activityData = await getActivityData();
setCardActivities(activityData);
};
const setPolylineArray = async () => {
const polylineArray = []
// right now activites refers to our button to show all activites
// we will eventually be using global state in redux
// for now we have a different state for card activties
for(let i = 0; i < cardActivites.length; i++) {
const polylineData = cardActivites[i].map.summary_polyline;
const activityName = cardActivites[i].name;
const activityType = cardActivites[i].type
polylineArray.push({positions: polyline.decode(polylineData), name: activityName, activityType: activityType });
} // should push activity type as well
setPolylines(polylineArray);
console.log("Polyline array = ", polylineArray);
}
const activityCards = async () => {
// set up polyline array
setCards(polylines.map((polyline, i) => {
return <Card key={i} activityData={{polyline}}/>
}))
console.log("cards = ", cards);
//return <Card activityData={{polylines}}/>
}
return (
<div>
<p>cards</p>
{cards}
</div>
)
}
export default LandingPage;
generic component: import react from 'react';
import { MapContainer, TileLayer, Popup, Polyline} from 'react-leaflet';
import polyline from '#mapbox/polyline';
import { useEffect, useState } from 'react';
function MapComp(props) {
function getInitPosition() {
console.log("props activity data = ", props);
if(!Array.isArray(props.activityData)) {
return [props.activityData.positions[0][0],props.activityData.positions[0][1]];
}
else {
return [props.activityData.poylines.positions[0][0],props.activityData.poylines.positions[0][1]];
}
}
return (
<MapContainer center={getInitPosition()} zoom={15} scrollWheelZoom={false} style={props.style}>
<TileLayer attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{!Array.isArray(props.activityData) && <Polyline positions={props.activityData.positions} >
<Popup>
<div>
<h2>{"Name: " + + props.activityData.name}</h2>
</div>
</Popup>
</Polyline>
}
{Array.isArray(props.activityData.polylines) && props.activityData.polylines.length > 1 &&
props.activityData.polylines.map((activity, idx) => (
<Polyline key={idx} positions={activity.positions}
<Popup>
<div>
<h2>{"Name: " + activity.name}</h2>
</div>
</Popup>
</Polyline>
))}
</MapContainer>
)
}
export default MapComp;
Can anyone see my issue why polylines isn't being set or how to ensure it is set before passing the data as props?
I have a problem while trying to require meta data from an mdx file in my Next.js project.
MDX file example:
export const meta = {
title: 'title',
date: new Date('May 09, 2019'),
};
Content
export const getStaticProps = async context => {
const postFilenames = await recRead(process.cwd() + '/pages', ['*.tsx']);
const postMetadata = await Promise.all(
postFilenames.map(async p => {
const { meta } = require(p);
return meta;
}),
);
return {
props: {
postMetadata: postMetadata,
},
};
};
It is a modified version of this: https://sarim.work/blog/dynamic-imports-mdx. While accessing a website I get an error:
Cannot find module '/home/oliwier/webDev/oliwierwpodrozy/pages/balkany/1.mdx'.
BTW recRead is this https://www.npmjs.com/package/recursive-readdir.
What is going on? Outside of getStaticProps I can import data.
I found something ridiculous when trying to solve the problem.
// 1)console.log(postFilenamesToImport[0]);
// 2) const meta = await import('../pages/wielka-brytania/1.mdx');
// 3) const meta = await import(postFilenamesToImport[0]);
// console.log(meta.meta);
shows: ../pages/wielka-brytania/1.mdx which is a string
This one works
But this one doesn't. Shows error: Error: Cannot find module '../pages/wielka-brytania/1.mdx'
It is not a const problem. It is written for tests and i know that using 2) and 3) together would cause problem. This error occurs when 1) is commented.
You can import metadata like follows.
First, we export the metadata from within the .mdx file
// in /pages/posts/example.mdx
import Layout from "../../components/layout";
export const meta = {
title: "example",
date: "2021-12-27",
slug: "example",
};
Lorem ipsum.
export default ({ children }) => (
<Layout subtitle={meta.title}>{children}</Layout>
);
Then we use getStaticProps to scan the file system at runtime, importing each .mdx file as a module, then mapping out their metadata exports. Since we are displaying the metadata on the index page, we will pop index.js from the array.
// in /pages/posts/index.js
export const getStaticProps = async (context) => {
const postDirectory = path.join(process.cwd(), "src/pages/posts");
let postFilenames = fs.readdirSync(postDirectory);
postFilenames = removeItemOnce(postFilenames, "index.js");
const postModules = await Promise.all(
postFilenames.map(async (p) => import(`./${p}`))
);
const postMetadata = postModules.map((m) => (m.meta ? m.meta : null));
return {
props: {
postMetadata: postMetadata,
},
};
// thanks https://sarim.work/blog/dynamic-imports-mdx
};
function removeItemOnce(arr, value) {
var index = arr.indexOf(value);
if (index > -1) {
arr.splice(index, 1);
}
return arr;
// thanks https://stackoverflow.com/a/5767357/13090245
}
Here is one way of using the prop to render a list of posts
// in /pages/posts/index.js
export default function PostsIndex({ postMetadata }) {
return (
<Layout subtitle="blog index">
<ul>
{postMetadata.map(({ slug, date, title }) => (
<li key={slug}>
<Link href={`/posts/${slug}`} a={title} />
<br />
{date}
</li>
))}
</ul>
</Layout>
);
}
My Gatsby site use the same GSAP timeline on every page, so I want to stay DRY and my idea is to include my timeline in my Layout component in that order.
But I don't know how to pass refs that I need between children and layout using forwardRef.
In short, I don't know how to handle the sectionsRef part between pages and layout.
sectionsRef is dependant of the page content (children) but is needed in the timeline living in layout.
How can I share sectionsRef between these two (I tried many things but always leading to errors)?
Here's a codesandbox without the refs in the Layout:
https://codesandbox.io/s/jolly-almeida-njt2e?file=/src/pages/index.js
And the sandbox with the refs in the layout:
https://codesandbox.io/s/pensive-varahamihira-tc45m?file=/src/pages/index.js
Here's a simplified version of my files :
Layout.js
export default function Layout({ children }) {
const containerRef = useRef(null);
const sectionsRef = useRef([]);
sectionsRef.current = [];
useEffect(() => {
gsap.registerPlugin(ScrollTrigger);
const scrollTimeline = gsap.timeline();
scrollTimeline.to(sectionsRef.current, {
x: () =>
`${-(
containerRef.current.scrollWidth -
document.documentElement.clientWidth
)}px`,
ease: 'none',
scrollTrigger: {
trigger: containerRef.current,
invalidateOnRefresh: true,
scrub: 0.5,
pin: true,
start: () => `top top`,
end: () =>
`+=${
containerRef.current.scrollWidth -
document.documentElement.clientWidth
}`,
},
});
}, [containerRef, sectionsRef]);
return (
<div className="slides-container" ref={containerRef}>
{children}
</div>
);
}
index.js (page)
import { graphql } from 'gatsby';
import React, { forwardRef } from 'react';
import SectionImage from '../components/sections/SectionImage';
import SectionIntro from '../components/sections/SectionIntro';
import SectionColumns from '../components/sections/SectionColumns';
const HomePage = ({ data: { home } }, sectionsRef) => {
const { sections } = home;
const addToRefs = (el) => {
if (el && !sectionsRef.current.includes(el)) {
sectionsRef.current.push(el);
}
};
return (
<>
{sections.map((section) => {
if (section.__typename === 'SanitySectionIntro') {
return (
<SectionIntro key={section.id} section={section} ref={addToRefs} />
);
}
if (section.__typename === 'SanitySectionImage') {
return (
<SectionImage key={section.id} section={section} ref={addToRefs} />
);
}
if (section.__typename === 'SanitySectionColumns') {
return (
<SectionColumns
key={section.id}
section={section}
ref={addToRefs}
/>
);
}
return '';
})}
</>
);
};
export default forwardRef(HomePage);
export const query = graphql`
query HomeQuery {
// ...
}
`;
Any clue greatly appreciated :)
i currently have a FlatList in my React Native project that renders the posts from nodejs backend. I have applied the pagination to my backend and it is working when i am testing it on postman. My problem is when i test my app on a simulator when i reach the end of the page 0, page 1 does not load.
Here is my FlatList:
<FlatList
data={posts} // to have all the data
keyExtractor={(post) => post.id.toString()}
renderItem={({ item }) => (
<PostCard
title={item.title}
subTitle={item.subTitle}
/>
)}
onEndReached={onScrollHandler}
onEndThreshold={0}
/>
const { data: posts, error, loading, request: loadPosts } = useApi(
postsApi.getPosts
);
useEffect(() => {
loadPosts();
}, []);
const[page,setPage]=useState(0);
const[profiles,setProfiles]=useState([]);
const fetchRecords=(page)=>{
const newRecords = []
for(var i = page * 10, il = i + 10; i < il && i < posts.length; i++){
newRecords.push(posts[i]);
}
setProfiles(...profiles, ...newRecords)
}
const onScrollHandler =()=>{
setPage(page+1);
fetchRecords(page)
}
Here is my nodeJS backend:
router.get("/",
async (req, res) => {
const getPagination = (page, size) => {
const limit = size ? +size : 10;
const offset = page ? page * limit : 0;
return { limit, offset };
};
const { page, size } = req.query;
const { limit, offset } = getPagination(page, size);
const posts = await Post.findAll({
limit,offset,
Here my route is /posts which i declared in my index.js in my backend.
Before applying pagination in my backend, when i used to do console.log(posts) in frontend i used to get all my posts but after i applied pagination when i do console.log(posts) i only get the posts for the first page.
Can you try to put this in useEffect.
useEffect(()=>{ apiCall()},[page])
If I am not wrong, you want to concatenate newly fetched records with the records that you already have, if that is the case, then you are supposed to do it like below:
setProfiles([...profiles, ...newRecords])
example:
let str1 = [1,2,3,4]
let str2 = [5,6,7,7]
// you dont want that
console.log(...str1, ...str2)
// but this, it will create a new array,
// having elements of both str1 and str2 which is what should be
console.log([...str1, ...str2])
Example:
import React, { useState } from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default function App() {
const [posts, setPosts] = useState(
Array.from({ length: 10 }, () => Math.floor(Math.random() * 100))
);
const onEndReached = () => {
let newPosts = Array.from(
{ length: 4 },
() => 'New Item Added ' + Math.floor(Math.random() * 100)
);
console.log(newPosts)
setTimeout(() => {
setPosts([...posts, ...newPosts]);
}, 1000);
};
return (
<View style={styles.container}>
<FlatList
data={posts}
onEndReached={onEndReached}
keyExtractor={(posts) => Math.floor(Math.random() * 1000)}
renderItem={({ item }) => (
<Card style={styles.card}>
<Text style={styles.paragraph}>{item}</Text>
</Card>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
card: {
margin: 10,
padding: 10,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
Expo Demo
Screenshow:
Did you inspect if your onScrollHandler function is called whenever you reached at the end of the flat list.
Also please wrap your flat list inside SafeAreaView and give SafeAreaView style of flex : 1
<SafeAreaView>
<FlatList/>
</SafeAreaView>