We Keep Coding

React Navigation trying to use navigation.navigate in a class Component

I need to access the navigate prop in a class component to navigate to another page however that's not possible outside a functional component. And I'm having trouble trying to use the workaround from the docs.
Current code is just returning an error
I have a feeling I am just misunderstanding the docs in this case. Any help would be huge!
Class Component
import { firebase } from "#react-native-firebase/auth";
import { NavigationContainer, useNavigation } from "#react-navigation/native";
import {
Box,
Button,
Divider,
HStack,
Heading,
ScrollView,
Spinner,
Text,
} from "native-base";
import React from "react";
const user = firebase.auth().currentUser;
function getIsQuestCompleted(querySnapshot: any) {
return querySnapshot.get("key");
}
class TaskTrackingComp extends React.Component {
state = {
savedKey: [],
ttrkerData: [],
loading: true,
};
getTarkovTrackerData = async () => {
await fetch("https://tarkovtracker.io/api/v2/progress", {
method: "GET",
headers: {
Authorization: `Bearer ${this.state.savedKey}`,
},
})
.then((res) => res.json())
.then((data) =>
this.setState({
ttrkerData: data,
loading: false,
})
);
};
componentDidMount() {
firebase
.firestore()
.collection("UserApiKeys")
.doc(user?.uid)
.get()
.then((querySnapshot) => getIsQuestCompleted(querySnapshot))
.then((savedKey) => {
console.log("Saved Key", savedKey),
this.setState({
savedKey,
}),
this.getTarkovTrackerData();
});
}
render() {
const { navigation } = this.props;
console.log("savedKey state:", this.state.savedKey);
console.log("Tarkov Tracker Data state:", this.state.ttrkerData);
console.log("Loading?", this.state.loading);
return (
<ScrollView>
<Box justifyContent={"center"} alignItems={"center"}>
<Heading fontWeight={"extrabold"}>Tarkov Tracker Stats</Heading>
</Box>
<Divider />
{this.state.loading ? (
<HStack space={2} justifyContent={"center"} alignItems={"center"}>
<Box>
<Text>Getting Stats</Text>
</Box>
<Box>
<Spinner color="warning.500" />
</Box>
</HStack>
) : (
<Box justifyContent={"center"} alignItems={"center"}>
<Button onPress={() => navigation.navigation("Home")}></Button>
</Box>
)}
</ScrollView>
);
}
}
export default function TaskTracking(props: any) {
const navigation = useNavigation();
return <TaskTrackingComp {...props} navigation={navigation} />;
}

This was a mistake on my part I did not realise the export was a default and that was causing the error!

try changing onPress function of Button to this navigation.navigate("Home")

Invalid hook call. Hooks can only be called inside of the body of a function component. - useContext

I have created an empty object variable named workspacesData through the context api which is available globally across the app. I am trying to set my api data to the variable within the helper function that is below (getWorkspacesData).
This function getWorkspacesData is then being called on another page of the application for when the user wants to pull in the data and have it displayed on the page. Problem is when the user presses the button I get the error "Invalid hook call. Hooks can only be called inside of the body of a function component."
I know the issue is that I am using the useContext hook within this function, but how do I get around this issue? as I want to use the globally available variable to set the data to it.
getWorkspaces.js
import { useContext } from "react";
import { AppContext } from "../../../context/context";
import mavenlinkAPI from "../apiTools";
const GetWorkspaces = async (mavenlinkAccessToken) => {
const {setWorkspacesData} = useContext(AppContext);
try{
const data = await mavenlinkAPI(
'get',
'workspaces?token='+mavenlinkAccessToken,
);
console.log(data)
setWorkspacesData(data);
} catch (error) {
console.log(error)
}
}
export default GetWorkspaces;
MavenlinkPage.jsx
import { Container, Grid, Paper } from '#mui/material';
import React, {useContext, useEffect, useRef, useState} from 'react';
import { getAuth } from "firebase/auth";
import Fab from '#mui/material/Fab';
import AddIcon from '#mui/icons-material/Add';
import {SuccessSnackbar, ErrorSnackbar} from '../components/PopupSnackbar';
import { AppContext } from '../context/context';
import GetWorkspaces from '../helpers/api/mavenlink/getWorkspaces';
import GetTimesheets from '../helpers/api/mavenlink/getTimesheets';
import GetUsers from '../helpers/api/mavenlink/getUsers';
import CreateProject from '../helpers/api/mavenlink/createProject';
import GetMavenlinkAccessToken from '../helpers/api/mavenlink/getMavenlinkAccessToken';
import DummyDataHolder from '../components/dummyDataHolder';
// import { DataGrid } from '#material-ui/x-data-grid';
export const MavenlinkPage = () => {
const { mavenlinkConnected } = useContext(AppContext);
const [errorAlert, setErrorAlert] = useState(false);
const [successAlert, setSuccessAlert] = useState(false);
const { mavenlinkAccessToken, setMavenlinkAccessToken } = useContext(AppContext);
const { workspacesData } = useContext(AppContext);
const auth = getAuth();
const user = auth.currentUser;
const uid = user.uid
const handleAlertClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
setSuccessAlert(false) && setErrorAlert(false);
};
useEffect(() => {
if(mavenlinkConnected){
GetMavenlinkAccessToken(setMavenlinkAccessToken);
}
}, [])
console.log(mavenlinkAccessToken)
return(
<>
<Container>
<div className="mavenlink-page">
<Grid container spacing={2}>
<Grid item xs={12}>
<h1>Mavenlink</h1>
</Grid>
<Grid item xs={12}>
<Paper className="connection-status" elevation={1}>
<h4 className="title">Connection Status:</h4>
{!mavenlinkConnected ? <h4 className="response-error">{user.email} is not connected</h4> : <h4 className="response-success">{user.email} is connected</h4>}
</Paper>
</Grid>
<Grid item xs={12}>
<Paper elevation={1}>
<h4>Get Workspaces</h4>
<Fab onClick={() => GetWorkspaces(mavenlinkAccessToken)} color="primary" aria-label="add">
<AddIcon />
</Fab>
<h4>Get timesheets</h4>
<Fab onClick={() => GetTimesheets(mavenlinkAccessToken)} color="primary" aria-label="add">
<AddIcon />
</Fab>
<h4>Get users</h4>
<Fab onClick={() => GetUsers(mavenlinkAccessToken)} color="primary" aria-label="add">
<AddIcon />
</Fab>
<h4>Create project</h4>
<Fab onClick={() => CreateProject(mavenlinkAccessToken)} color="primary" aria-label="add">
<AddIcon />
</Fab>
</Paper>
</Grid>
<Grid item xs={12}>
<Paper elevation={10} style={{ height: 400, width: '100%' }}>
{workspacesData != null ?
Object.keys(workspacesData).map((item, index) => {
return(
<div key={index}>
{workspacesData[item].map((m, ind) =>
<div key={ind}>{item}</div>
)}
</div>
)
})
:
<div></div>
}
</Paper>
</Grid>
</Grid>
</div>
{successAlert === true ? <SuccessSnackbar open={successAlert} handleClose={handleAlertClose}/> : <></> }
{errorAlert === true ? <ErrorSnackbar open={errorAlert} handleClose={handleAlertClose}/> : <></> }
</Container>
</>
);
};

You can call the hook inside your component and pass the returned value from it to the function:
const getWorkspaces = async (mavenlinkAccessToken, onSuccess) => {
try{
const data = await mavenlinkAPI(
'get',
'workspaces?token='+mavenlinkAccessToken,
);
onSuccess?.(data)
} catch (error) {
console.log(error)
}
}
And call it as:
export const MavenlinkPage = () => {
const { setWorkspacesData } = useContext(AppContext);
...
onClick={() => getWorkspaces(mavenlinkAccessToken, setWorkspacesData )}
}
Or create a custom hook:
const useGetWorkspaces = (mavenlinkAccessToken) => {
const { setWorkspacesData } = useContext(AppContext);
return async () => {
try{
const data = await mavenlinkAPI(
'get',
'workspaces?token='+mavenlinkAccessToken,
);
setWorkspacesData(data);
} catch (error) {
console.log(error)
}
}
}
And use it like:
export const MavenlinkPage = () => {
const getWorkspaces = useGetWorkspaces(mavenlinkAccessToken);
...
onClick={() => getWorkspaces()}
}

Uncaught ReferenceError: Cannot access 'ordersToDisplay' before initialization - trying to update value on re-render React

I am trying to set the title of my document to "/{orderNumber}orders" and for that orderNumber value to update every time user clicks the button and different number of orders from filtered array are displayed on the screen.
For context, I am importing a json file, filtering it to display the correct elements I want decided by user input, and I am then calculating the length of that array, of which that integer needs to be stored in orderNumber variable to update document title.
I know I am accessing the correct value of the arrays as I have console logged it, my issue is how to update this state change every re render without this error throwing: (Uncaught ReferenceError: Cannot access 'ordersToDisplay' before initialization)
Code:
import { Col, Row } from "antd";
import { useContext, useEffect, useMemo, useState } from "react";
import Order from "../components/Order";
import { AppContext } from "../context/Context";
import AntButton from "../elements/Button";
import ordersToDisplay from "../orders.json";
const OrdersPage = () => {
const [filteringStatus, setFilteringStatus] = useState("");
const {orderAmount, setOrderAmount} = useContext(AppContext)
const [test, setTest] = useState("")
const setDiplayAcceptedOrders = () => {
setFilteringStatus("accepted");
setTest(ordersToDisplay.length)
};
const setDiplayCompletedOrders = () => {
setFilteringStatus("complete");
setTest(ordersToDisplay.length)
};
const setDiplayInProgressOrders = () => {
setFilteringStatus("inProgress");
setTest(ordersToDisplay.length)
};
const ordersToDisplay = useMemo(() => {
if (filteringStatus) {
return ordersToDisplay.filter((i) => i.orderStatus === filteringStatus);
}
return ordersToDisplay;
}, [filteringStatus]);
console.log("Orders to display: ", ordersToDisplay);
console.log("test value: ", test)
return(
<div className="container">
<Row justify="space-between" align="middle">
<Col span={6}>
<h1>Orders</h1>
</Col>
<Col span={6}>
<AntButton onClick={setDiplayAcceptedOrders} name="Accepted"/>
</Col>
<Col span={6}>
<AntButton onClick={setDiplayInProgressOrders} name="In Progress"/>
</Col>
<Col span={6}>
<AntButton onClick={setDiplayCompletedOrders} name="Complete"/>
</Col>
</Row>
<Row>
<Col span={12}>
<h3>{filteringStatus == "" ? "All Orders" : filteringStatus}</h3>
{ordersToDisplay.map((e) => {
return(
<Order
key={e.id}
productName={e.productName}
dateOrdered={e.dateOrdered}
orderStatus={e.orderStatus}
/>
)
})}
</Col>
</Row>
</div>
)
}
export default OrdersPage;
app
const App = () => {
const [orderAmount, setOrderAmount] = useState("")
const Routes = useRoutes([
{path: "/", element: <HomePage/>},
{path: `/(${orderAmount})orders`, element: <OrdersPage/>}
])
return (
<AppContext.Provider value={{
orderAmount, setOrderAmount
}}>
<div>
{Routes}
</div>
</AppContext.Provider>
);
};
export default App;

You are masking the imported ordersToDisplay with what you are trying to memoize. Rename the memoized version/variable. You need only store in state the current filteringStatus state, the test state seems unnecessary and isn't used from what I see.
To update the orderAmount state in the context, use a useEffect hook with a dependency on the computed/memoized orders value to issue a side-effect to update the orderAmount value.
Example:
import { Col, Row } from "antd";
import { useContext, useEffect, useMemo, useState } from "react";
import Order from "../components/Order";
import { AppContext } from "../context/Context";
import AntButton from "../elements/Button";
import ordersToDisplay from "../orders.json";
const OrdersPage = () => {
const [filteringStatus, setFilteringStatus] = useState("");
const { orderAmount, setOrderAmount } = useContext(AppContext);
const setDiplayAcceptedOrders = () => {
setFilteringStatus("accepted");
};
const setDiplayCompletedOrders = () => {
setFilteringStatus("complete");
};
const setDiplayInProgressOrders = () => {
setFilteringStatus("inProgress");
};
// rename to something else, anything but ordersToDisplay
const orders = useMemo(() => {
if (filteringStatus) {
return ordersToDisplay.filter((i) => i.orderStatus === filteringStatus);
}
return ordersToDisplay;
}, [filteringStatus]);
useEffect(() => {
console.log("Orders to display: ", orders); // <-- output derived value
// update amount when orders array updates
setOrderAmount(orders.length);
}, [orders, setOrderAmount]);
return (
<div className="container">
<Row justify="space-between" align="middle">
<Col span={6}>
<h1>Orders</h1>
</Col>
<Col span={6}>
<AntButton onClick={setDiplayAcceptedOrders} name="Accepted"/>
</Col>
<Col span={6}>
<AntButton onClick={setDiplayInProgressOrders} name="In Progress"/>
</Col>
<Col span={6}>
<AntButton onClick={setDiplayCompletedOrders} name="Complete"/>
</Col>
</Row>
<Row>
<Col span={12}>
<h3>{filteringStatus == "" ? "All Orders" : filteringStatus}</h3>
{orders.map((e) => { // <-- use here
return (
<Order
key={e.id}
productName={e.productName}
dateOrdered={e.dateOrdered}
orderStatus={e.orderStatus}
/>
)
})}
</Col>
</Row>
</div>
);
};
export default OrdersPage;

using useparams and array.find to display detailed data

I am making a small blog application using react js. I have a context api for the user inputs, so that the data can be used globally across components (InputContext.js). Using react router, the user is able to view a list of all blog entries (AllBlogs.js) and view each one of them in detail (BlogDetail.js). What I am trying to achieve is, allow the user to get a detailed view of an individual blog post component from the AllBlogs.js page. All blogs have an "id" property, which is used to query the url and using the array.find method, it is supposed to show a detailed view of the blog with the matching id. The problem is "findBlogs" in BlogDetails that is being passed as a prop to display the detailed individual blog data always only returns the most recent user input value, therefore all blogs show the exact same information. I am unsure as to why this is happening, any guidance towards the right direction is greatly appreciated.
InputContext.js
import React, { useState, createContext, useMemo } from 'react'
//create context
export const InputContext = createContext();
const InputContextProvider = (props) => {
const [blogPost, setBlogPost] = useState({
id: '',
title: '',
author: '',
text: ''
});
//create an array to push all the blogPosts
const [allBlogPosts, setAllBlogPosts] = useState([]);
console.log(allBlogPosts)
//put value inside useMemo so that the component only rerenders when there is change in the value
const value = useMemo(() => ({ blogPost, setBlogPost, allBlogPosts, setAllBlogPosts }), [blogPost, allBlogPosts])
return (
<InputContext.Provider value={value}>
{props.children}
</InputContext.Provider>
)
}
export default InputContextProvider;
WriteBlogPost.js
import React, { useState, useContext, Fragment } from 'react'
import { useHistory } from 'react-router-dom'
import { InputContext } from '../Contexts/InputContext'
import { TextareaAutosize } from '#material-ui/core'
import { v4 as uuidv4 } from 'uuid';
import { Box, TextField, Button, makeStyles } from '#material-ui/core'
const useStyles = makeStyles({
root: {
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center'
}
})
export const WriteBlogPost = () => {
const classes = useStyles();
const [blog, setBlog] = useState({
id: '',
title: '',
author: '',
text: ''
});
const history = useHistory();
const { setBlogPost } = useContext(InputContext);
const { allBlogPosts, setAllBlogPosts } = useContext(InputContext)
const handleBlogPost = () => {
setBlogPost(blog);
setAllBlogPosts([...allBlogPosts, blog]);
history.push("/blogs")
console.log({ blog })
console.log({ allBlogPosts })
}
const handleChange = (e) => {
const value = e.target.value
setBlog({
...blog,
id: uuidv4(),
[e.target.name]: value
})
}
return (
<Fragment>
<Box className={classes.root}>
<div>
<TextField id="standard-basic" onChange={handleChange} value={blog.title} name="title" label="Title" />
</div>
<div>
<TextField id="standard-basic" onChange={handleChange} value={blog.author} name="author" label="Author" />
</div>
<div>
<TextareaAutosize aria-label="minimum height" minRows={20} style={{ width: '70%' }} placeholder="Your blog post"
onChange={handleChange}
value={blog.text}
name="text" />
</div>
<div>
<Button variant="contained" color="primary" onClick={handleBlogPost}>
Submit</Button>
</div>
</Box>
</Fragment>
)
}
AllBlogs.js
import React, { useContext } from 'react'
import { InputContext } from '../Contexts/InputContext'
import { Card, CardContent, Typography } from '#material-ui/core'
import { makeStyles } from '#material-ui/core'
import { Link } from 'react-router-dom'
const useStyles = makeStyles({
root: {
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
textAlign: 'center',
},
text: {
textAlign: 'center'
}
})
export const AllBlogs = () => {
const classes = useStyles();
const { allBlogPosts, blogPost } = useContext(InputContext)
console.log(allBlogPosts)
return (
<div>
<Typography color="textPrimary" variant="h3" className={classes.text}>All blogs</Typography>
{allBlogPosts.map((post, i) =>
<Card variant="outlined" key={i} className={classes.root}>
<CardContent>
<Typography color="textPrimary" variant="h5">
{post.title}
</Typography>
<Typography color="textPrimary" variant="h6">
{post.author}
</Typography>
<Typography color="textPrimary" variant="body2" component="p">
{post.text}
</Typography>
<Link to={`/blogs/${blogPost.id}`}>
Read blog
</Link>
</CardContent>
</Card>
)}
</div>
)
}
BlogDetail.js
import React, { useContext } from 'react'
import { useParams, Route } from 'react-router'
import { SingleBlog } from './SingleBlog';
import { InputContext } from '../Contexts/InputContext';
export const BlogDetail = () => {
const params = useParams();
console.log(params.blogId)
const { allBlogPosts } = useContext(InputContext)
const findBlog = allBlogPosts.find((post) => post.id === params.blogId)
console.log(findBlog)
if (!findBlog) {
return <p>No blogs found.</p>
}
return (
<div>
<h1>Blog details</h1>
<SingleBlog post={findBlog} />
</div>
)
}

Issue
Ah, I see what is happening... had to dig back through your edits to when you included your context code.
In your provider you for some reason store an array of blogs (this part makes sense), but then you also store the last blog that was edited.
const InputContextProvider = (props) => {
const [blogPost, setBlogPost] = useState({
id: '',
title: '',
author: '',
text: ''
});
//create an array to push all the blogPosts
const [allBlogPosts, setAllBlogPosts] = useState([]);
//put value inside useMemo so that the component only rerenders when there is change in the value
const value = useMemo(() => ({
blogPost, // <-- last blog edited
setBlogPost,
allBlogPosts,
setAllBlogPosts
}), [blogPost, allBlogPosts])
return (
<InputContext.Provider value={value}>
{props.children}
</InputContext.Provider>
)
}
export const WriteBlogPost = () => {
...
const [blog, setBlog] = useState({
id: '',
title: '',
author: '',
text: ''
});
...
const { setBlogPost } = useContext(InputContext);
const { allBlogPosts, setAllBlogPosts } = useContext(InputContext)
const handleBlogPost = () => {
setBlogPost(blog); // <-- saves last blog edited/added
setAllBlogPosts([...allBlogPosts, blog]);
history.push("/blogs");
}
const handleChange = (e) => {
const value = e.target.value
setBlog({
...blog,
id: uuidv4(),
[e.target.name]: value
})
}
return (
...
)
}
When you are mapping the blog posts you form incorrect links.
export const AllBlogs = () => {
const classes = useStyles();
const {
allBlogPosts,
blogPost // <-- last blog updated
} = useContext(InputContext);
return (
<div>
...
{allBlogPosts.map((post, i) =>
<Card variant="outlined" key={i} className={classes.root}>
<CardContent>
...
<Link to={`/blogs/${blogPost.id}`}> // <-- link last blog updated id
Read blog
</Link>
</CardContent>
</Card>
)}
</div>
)
}
Solution
Use the current blog post's id when mapping to form the link correctly.
export const AllBlogs = () => {
const classes = useStyles();
const { allBlogPosts } = useContext(InputContext);
return (
<div>
...
{allBlogPosts.map((post, i) =>
<Card variant="outlined" key={post.id} className={classes.root}>
<CardContent>
...
<Link to={`/blogs/${post.id}`}> // <-- link current post id
Read blog
</Link>
</CardContent>
</Card>
)}
</div>
)
}

How to add infinite scrolling to a list of cards? [ReactJS]

I've been working on a pokedex project that allows me to display a list of pokecards.
the code for the PokemonList.js is as follows
import React, { Component } from "react";
import PokemonCard from "./PokemonCard";
import axios from "axios";
export default class PokemonList extends Component {
state = {
url: "http://pokeapi.co/api/v2/pokemon/?limit=200",
pokemon: null,
itemsCountPerPage: 20,
activePage: 1
};
async componentDidMount() {
const res = await axios.get(this.state.url);
this.setState({ pokemon: res.data["results"] });
}
render() {
console.log(this.state.pokemon);
return (
<React.Fragment>
{this.state.pokemon ? (
<div className="row">
{this.state.pokemon.map(pokemon => (
<PokemonCard
key={pokemon.name}
name={pokemon.name}
url={pokemon.url}
/>
))}
</div>
) : (
<h1>Loading Pokemon</h1>
)}
</React.Fragment>
);
}
}
I have been trying to use infinite scroller addons such as https://www.npmjs.com/package/react-infinite-scroller but I've never seemed to get it to work. How could I apply infinite scrolling that'd load 20 cards at a time?
-----------------EDIT--------------------------------

Here is how to implement an infinite scroll using this API:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import axios from "axios";
import InfiniteScroll from "react-infinite-scroller";
export default class App extends Component {
state = {
url: "https://pokeapi.co/api/v2/pokemon/?limit=200",
pokemon: [],
itemsCountPerPage: 20,
activePage: 1
};
loadPokemon = () => {
axios
.get(this.state.url)
.then(res => {
this.setState(prevState => {
return {
pokemon: [...prevState.pokemon, ...res.data.results],
url: res.data.next
};
});
})
.catch(function(error) {
// handle error
console.log(error);
});
};
render() {
// console.log(this.state.pokemon);
return (
<React.Fragment>
{this.state.pokemon ? (
<div className="row">
<InfiniteScroll
pageStart={0}
loadMore={this.loadPokemon}
hasMore={this.state.url}
loader={
<div className="loader" key={0}>
Loading ...
</div>
}
>
{this.state.pokemon.map((pokemon, i) => (
<div
style={{ borderBottom: "1px solid", padding: "10px" }}
key={pokemon.name + i}
>
<div>{pokemon.name}</div>
<div>{pokemon.url}</div>
</div>
))}
</InfiniteScroll>
</div>
) : (
<h1>Loading Pokemon</h1>
)}
</React.Fragment>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
You can see it up and running in a codesandbox here: