Develop Reference

Uncaught Error: invariant expected app router to be mounted

I've got an error while do migration to next 13 on my old project written in next 12.
Console Error Log
I can't find fault in my code for that errors.
And I googled it but i can't find any solution for this.
It don't explains any errors for my code.
How can I solve it?
I couldn't try anything because it do not explains any error for my code.
Please let me know what is the origin for that error.
Thank you.
++++++++++
navigation.js
function useRouter() {
const router = (0, _react).useContext(_appRouterContext.AppRouterContext);
if (router === null) {
throw new Error('invariant expected app router to be mounted');
}
return router;
}
i think "next/navigation" contains this file (navigation.js)
this error threw when router is null, but i still can't know why router is null.
+++++++++++ layout.jsx
"use client";
import { motion, AnimatePresence } from "framer-motion";
import "animate.css";
import { useRouter } from "next/navigation";
import LoadingSpinner from "../components/layout/media/LoadingSpinner";
import Users from "../class/Users.class";
import { useEffect } from "react";
import create from "zustand";
import Head from "next/head";
import Image from "next/image";
import NavBar from "../components/layout/NavBar";
import SubTransition from "../components/transition/SubTransition";
import LoginModal from "../components/layout/LoginModal";
import "../styles/betconstruct_icons.css";
import "../styles/global.css";
const useStore = create(() => ({
isShowLoginModal: false,
isLoading: true,
}));
//default layout
function MainLayout({ children }) {
useEffect(() => {
Users.checkToken().then((res) => {
if (res) {
console.log("token is valid");
} else {
console.log("token is invalid");
}
LoadingDone();
});
//router.events.on("routeChangeStart", (url) => {
// LoadingNow();
//});
//router.events.on("routeChangeComplete", () => LoadingDone());
//router.events.on("routeChangeError", () => LoadingDone());
if (router.pathname === "/") {
document.querySelector("body").classList.add("layout-bc");
document.querySelector("body").classList.add("theme-default");
document.querySelector("body").classList.add("smart-panel-is-visible");
document.querySelector("body").classList.add("betslip-Hidden");
document.querySelector("body").classList.add("is-home-page");
}
if (router.pathname !== "/") {
document.querySelector("body").classList.add("layout-bc");
document.querySelector("body").classList.add("theme-default");
document.querySelector("body").classList.add("smart-panel-is-visible");
document.querySelector("body").classList.add("betslip-Hidden");
document.querySelector("body").classList.add("is-home-page");
}
}, []);
const animate = {
initial: {
opacity: 0,
transition: `transform 0.24s ease`,
},
animate: {
opacity: 1,
transition: `transform 0.24s ease`,
},
exit: {
opacity: 0,
transition: `transform 0.24s ease`,
},
};
const animateFlyIn = {
initial: {
opacity: 0,
x: 100,
transition: `transform 0.24s ease`,
},
animate: {
opacity: 1,
x: 0,
transition: `transform 0.24s ease`,
},
exit: {
opacity: 0,
x: 100,
transition: `transform 0.24s ease`,
},
};
const { isShowLoginModal, isLoading } = useStore();
const openLoginModal = () => {
useStore.setState({ isShowLoginModal: true });
};
const hideLoginModal = () => {
useStore.setState({ isShowLoginModal: false });
};
const LoadingNow = () => {
useStore.setState({ isLoading: true });
};
const LoadingDone = () => {
useStore.setState({ isLoading: false });
};
const router = useRouter();
return (
<>
<AnimatePresence exitBeforeEnter mode={"wait"}>
{isLoading ? (
<motion.div
key={router.route}
initial={animate.initial}
animate={animate.animate}
exit={animate.exit}
>
<LoadingSpinner router={router} />
</motion.div>
) : null}
{isShowLoginModal && (
<LoginModal
openLoginModal={openLoginModal}
isShowLoginModal={isShowLoginModal}
hideLoginModal={hideLoginModal}
LoadingNow={LoadingNow}
LoadingDone={LoadingDone}
/>
)}
</AnimatePresence>
<NavBar
isLoading={isLoading}
isShowLoginModal={isShowLoginModal}
openLoginModal={openLoginModal}
hideLoginModal={hideLoginModal}
LoadingNow={LoadingNow}
LoadingDone={LoadingDone}
router={router}
/>
<SubTransition>
<div className="layout-content-holder-bc">{children}</div>
</SubTransition>
</>
);
}
export default MainLayout;
+++ This error not occurs for /pages directory. only occurs in using /app directory

Happened to me when layout.tsx didn't have <body> tag.

While transferring the files to the new app the same error popped up which led me to believe it was something in the code I copied over. The issue was in my layout.tsx file that was causing hydration / mounting issues because of a dom mismatch.
Old layout causing bug
export default function RootLayout({ children}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<div className={styles.container}>
<header className={styles.header}>
<>
<Image
priority
src="/images/profile.jpg"
className={utilStyles.borderCircle}
height={144}
width={144}
alt=""
/>
<h1 className={utilStyles.heading2Xl}>{name}</h1>
</>
</header>
<main>{children}</main>
</div>
</html>
);
Fixed code in layout.tsx
export default function RootLayout({ children}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<head className={styles.header}>
</head>
<body>{children}</body>
</html>
);
}
Even better: reference layout from beta docs
export default function RootLayout({ children }) {
return (
<html lang="en">
{
}
<head />
<body>{children}</body>
</html>
);
}
**Errors for reference if anyone else is encountering this problem.
Uncaught Error: invariant expected app router to be mounted
react-dom.development.js:21494 The above error occurred in the component:
at HotReload (webpack-internal:///./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:19:11)**

The top-most layout is called the Root Layout. This required layout is shared across all pages in an application. Root layouts must contain html and body tags.
export default function RootLayout({ children }: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
Sources:
https://beta.nextjs.org/docs/routing/pages-and-layouts#layouts
https://beta.nextjs.org/docs/routing/pages-and-layouts#root-layout-required

Refactor class to function components in React

I'm having a hard time converting these 3 class components to function components, the class components are working i just am trying to convert them for learning purposes.
the API call: yelp.js
const { default: SearchBar } = require("../components/SearchBar/SearchBar");
const Yelp = {
searchYelp(term, location) {
return fetch(`/api/hello?term=${term}&location=${location}`)
.then((response) => {
// console.log(response)
return response.json()
}).then((jsonResponse) => {
// console.log(jsonResponse)
if (jsonResponse.businesses) {
return jsonResponse.businesses.map((business) => {
return {
id: business.id,
imageSrc: business.image_url,
name: business.name,
address: business.location.address1,
city: business.location.city,
state: business.location.state,
zipCode: business.location.zip_code,
category: business.categories.title,
rating: business.rating,
reviewCount: business.review_count,
}
})
}
})
}
}
export default Yelp
The Home component as a function that renders a SearchBar and BusinessList component: Home.js
import React, { useState } from "react";
import BusinessList from '../../../src/components/BusinessList/BusinessList';
import SearchBar from '../../../src/components/SearchBar/SearchBar';
import Yelp from '../../util/yelp';
const Home = (term, location) => {
const [businesses, setBusinesses] = useState([]);
const searchYelp = Yelp.searchYelp(term, location).then(businesses => {
setBusinesses(businesses)
})
return (
<>
<SearchBar searchYelp={searchYelp} />
<BusinessList business={businesses} />
</>
)
}
export default Home;
The Home component as a class: Home.js
// import React from 'react';
// import BusinessList from '../../../src/components/BusinessList/BusinessList';
// import SearchBar from '../../../src/components/SearchBar/SearchBar';
// import Yelp from '../../util/yelp';
// class Home extends React.Component {
// constructor() {
// super();
// this.state = {
// businesses: [],
// };
// this.searchYelp = this.searchYelp.bind(this);
// }
// searchYelp(term, location, sortBy) {
// Yelp.searchYelp(term, location, sortBy).then((businesses) => {
// this.setState({ businesses: businesses })
// })
// }
// render() {
// return (
// <>
// <SearchBar searchYelp={this.searchYelp} />
// <BusinessList businesses={this.state.businesses} />
// </>
// )
// }
// }
// export default Home;
The BusinessList component as a function that renders a Business component: BusinessList.js
import React, { useState } from "react";
import './BusinessList.css';
import Business from '../Business/Business';
function BusinessList(businesses) {
console.log(businesses)
return (
<div className="BusinessList">
{
businesses.map(business => {
<Business key={business.id} business={business} />
})
}
</div>
)
};
export default BusinessList;
The BusinessList component as a class: BusinessList.js
// import React from 'react';
// import './BusinessList.css';
// import Business from '../Business/Business';
// class BusinessList extends React.Component {
// constructor(props) {
// super(props)
// console.log(props.businesses)
// }
// render() {
// return (
// <div className="BusinessList">
// {
// this.props.businesses.map((business) => {
// return <Business key={business.id} business={business} />
// })
// }
// </div>
// )
// }
// };
// export default BusinessList;
The Business component as a function: Business.js
import React from "react";
import './Business.css';
const Business = (business) => {
return (
<div className="Business">
<div className="image-container">
<img src={business.business.imageSrc} alt={business.imageSrc} />
</div>
<h2>{business.business.name}</h2>
<div className="Business-information">
<div className="Business-address">
<p>{business.business.address}</p>
<p>{business.business.city} {business.state} {business.zipCode}</p>
</div>
<div className="Business-reviews">
<h3>{business.business.category}</h3>
<h3 className="rating">{business.business.rating}</h3>
<p>{business.business.reviewCount} reviews</p>
</div>
</div>
</div>
)
};
export default Business;
The Business component as a class: Business.js
// import React from "react";
// import './Business.css';
// class Business extends React.Component {
// render() {
// const { business } = this.props
// return (
// <div className="Business">
// <div className="image-container">
// <img src={business.imageSrc} alt={business.imageSrc} />
// </div>
// <h2>{business.name}</h2>
// <div className="Business-information">
// <div className="Business-address">
// <p>{business.address}</p>
// <p>{business.city} {business.state} {business.zipCode}</p>
// </div>
// <div className="Business-reviews">
// <h3>{business.category}</h3>
// <h3 className="rating">{business.rating}</h3>
// <p>{business.reviewCount} reviews</p>
// </div>
// </div>
// </div>
// )
// }
// };
// export default Business;
EDIT **
My attempt at SearchBar component as function: SearchBar.js
import React, { useState, useEffect } from "react";
import './SearchBar.css';
const SearchBar = (props) => {
const [term, setTerm] = useState('')
const [location, setLocation] = useState('')
const [sortBy, setSortBy] = useState('best_match')
const sortByOptions = {
'Best Match': 'best_match',
'Highest Rated': 'rating',
'Most Reviewed': 'review_count'
};
const handleSortByChange = () => {
setSortBy(sortBy)
// console.log(sortByOption)
console.log(sortBy)
}
const renderSortByOptions = (sortByOptions) => {
// console.log(Object.keys(sortByOptions))
return Object.keys(sortByOptions).map(sortByOption => {
let sortByOptionValue = sortByOptions[sortByOption]
// console.log(sortByOptionValue)
return <li
className={sortBy === sortByOption ? 'active' : ''}
onClick={handleSortByChange}
key={sortByOptionValue}>
{sortByOption}
</li>;
})
}
const handleTermChange = (event) => {
setTerm(event.target.value)
}
const handleLocationChange = (event) => {
setLocation(event.target.value)
}
const handleSearch = (event) => {
event.preventDefault()
props.searchYelp(term, location)
}
return (
<div className="SearchBar">
{props.searchYelp}
<div className="SearchBar-sort-options">
<ul>
{renderSortByOptions(sortByOptions)}
</ul>
</div>
<div className="SearchBar-fields">
<input
onChange={handleTermChange}
placeholder="Search Businesses"
/>
<input
onChange={handleLocationChange}
placeholder="Where?"
/>
<button className="SearchBar-submit" onClick={handleSearch}>Let's Go</button>
</div>
</div>
)
}
export default SearchBar;
EDIT**
SearchBar component as a class: SearchBar.js
import React from 'react';
import './SearchBar.css';
class SearchBar extends React.Component {
constructor(props) {
super(props);
this.state = {
term: '',
location: '',
sortBy: 'best_match'
}
this.handleTermChange = this.handleTermChange.bind(this)
this.handleLocationChange = this.handleLocationChange.bind(this)
this.handleSearch = this.handleSearch.bind(this)
this.sortByOptions = {
'Best Match': 'best_match',
'Highest Rated': 'rating',
'Most Reviewed': 'review_count'
};
}
getSortByClass(sortByOption) {
// console.log(sortByOption)
if (this.state.sortBy === sortByOption) {
return 'active'
}
return ''
}
handleSortByChange(sortByOption) {
this.setState({
sortBy: sortByOption
})
}
handleTermChange(event) {
this.setState({
term: event.target.value
})
}
handleLocationChange(event) {
this.setState({
location: event.target.value
})
}
handleSearch(event) {
this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy)
event.preventDefault()
}
renderSortByOptions() {
return Object.keys(this.sortByOptions).map(sortByOption => {
let sortByOptionValue = this.sortByOptions[sortByOption]
console.log(sortByOptionValue)
return <li
onClick={this.handleSortByChange.bind(this, sortByOptionValue)}
className={this.getSortByClass(sortByOptionValue)}
key={sortByOptionValue}>
{sortByOption}
</li>;
})
}
render() {
return (
<div className="SearchBar">
{this.searchYelp}
<div className="SearchBar-sort-options">
<ul>
{this.renderSortByOptions()}
</ul>
</div>
<div className="SearchBar-fields">
<input onChange={this.handleTermChange} placeholder="Search Businesses" />
<input onChange={this.handleLocationChange} placeholder="Where?" />
<button className="SearchBar-submit" onClick={this.handleSearch}>Let's Go</button>
</div>
</div>
)
}
};
export default SearchBar;
I keep getting the error "Cannot read properties of undefined (reading 'map')
Or the error "Businesses.map is not a function"
Im also a little confused as to why when everything is converted to function components in my final Business component in order to get things to showup im required to pass things in as business.business.imageSrc instead of just business.imageSrc

First in Home searchYelp should be declared as a function so it can be passed as a callback to the SearchBar component.
const Home = () => {
const [businesses, setBusinesses] = useState([]);
const searchYelp = (term, location) => {
Yelp.searchYelp(term, location)
.then(businesses => {
setBusinesses(businesses);
});
};
return (
<>
<SearchBar searchYelp={searchYelp} />
<BusinessList business={businesses} />
</>
)
};
Then in BusinessList you need to access the passed business prop. Your current code is naming the props object businesses and then attempts to map it. It could be businesses.business.map, but by convention we name the props object props or simply destructure the props you want to use. You need to also return the Business component you are mapping to.
function BusinessList({ business }) {
return (
<div className="BusinessList">
{business.map(business => {
return <Business key={business.id} business={business} />;
})}
</div>
)
};
Same issue with the props object name in the Business component.
const Business = (props) => {
return (
<div className="Business">
<div className="image-container">
<img src={props.business.imageSrc} alt={props.business.imageSrc} />
</div>
<h2>{props.business.name}</h2>
<div className="Business-information">
<div className="Business-address">
<p>{props.business.address}</p>
<p>{props.business.city} {props.business.state} {business.zipCode}</p>
</div>
<div className="Business-reviews">
<h3>{props.business.category}</h3>
<h3 className="rating">{props.business.rating}</h3>
<p>{props.business.reviewCount} reviews</p>
</div>
</div>
</div>
)
};

BusinessList receives props, an object containing the props passed in.
The function parameter would either need to destructure it:
function BusinessList({ businesses }) { ... }
Or reference it off the props object:
function BusinessList(props) {
console.log(props.businesses)
// ...
}

Few notes:
Right now Yelp.searchYelp returns Promise<any[] | undefined>, i.e undefined is a legitimate value that the consume may get. Up to you to decide if setBusinesses(businesses) when businesses is undefined is useful or not, but in that case, handle it. Otherwise default to an empty array, setBusinesses(businesses ?? []) or throw an error.
Do not run side effects in the render phase, i.e call the api inside a useEffect:
React.useEffect(() => {
const searchYelp = Yelp.searchYelp(term, location).then(businesses => {
setBusinesses(businesses ?? [])
})
}, [term, location])
Lastly, const Business = (business) => { here business is actually the props object. You can simply destructure it const Business = ({ business }) => { to get the value directly.

Check the render method of `UserActionApp`

I am new to react was trying to implement CRUD operations in React JS using web API. However, I am receiving an error which I do not understand.
The error is this:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
▶ 20 stack frames were collapsed.
Module../src/index.js
D:/crud-app/src/index.js:7
4 | import * as serviceWorker from './serviceWorker';
5 | import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
6 | import UserActionApp from './UserCRUD/UserAction';
> 7 | ReactDOM.render(<UserActionApp />, document.getElementById('root'));
8 | serviceWorker.unregister();
9 |
10 | // If you want your app to work offline and load faster, you can change
View compiled
I am using useractionapp component in the file user action.js
Here is the code for index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import UserActionApp from './UserCRUD/UserAction';
ReactDOM.render(<UserActionApp />,
document.getElementById('root'));
serviceWorker.unregister();
Here is the code for User Action:
import React, { Component } from 'react';
import { Container, Button } from 'react-bootstrap';
import UserList from './GetUser';
import AddUser from './AddUser';
import axios from 'axios';
const apiUrl = 'http://localhost:44360/api/User/';
class UserActionApp extends Component {
constructor(props) {
super(props);
this.state = {
isAddUser: false,
error: null,
response: {},
userData: {},
isEdituser: false,
isUserDetails:true,
}
this.onFormSubmit = this.onFormSubmit.bind(this);
}
onCreate() {
this.setState({ isAddUser: true });
this.setState({ isUserDetails: false });
}
onDetails() {
this.setState({ isUserDetails: true });
this.setState({ isAddUser: false });
}
onFormSubmit(data) {
this.setState({ isAddUser: true });
this.setState({ isUserDetails: false });
if (this.state.isEdituser) {
axios.put(apiUrl + 'UpdateEmployeeDetails',data).then(result => {
alert(result.data);
this.setState({
response:result,
isAddUser: false,
isEdituser: false
})
});
} else {
axios.post(apiUrl + 'InsertUserDetails',data).then(result => {
alert(result.data);
this.setState({
response:result,
isAddUser: false,
isEdituser: false
})
});
}
}
editUser = userId => {
this.setState({ isUserDetails: false });
axios.get(apiUrl + "GetUserDetailsById/" + userId).then(result => {
this.setState({
isEdituser: true,
isAddUser: true,
userData: result.data
});
},
(error) => {
this.setState({ error });
}
)
}
render() {
let userForm;
if (this.state.isAddUser || this.state.isEditUser) {
userForm = <AddUser onFormSubmit={this.onFormSubmit} user={this.state.userData} />
}
return (
<div className="App">
<Container>
<h1 style={{ textAlign: 'center' }}>CURD operation in React</h1>
<hr></hr>
{!this.state.isUserDetails && <Button variant="primary" onClick={() => this.onDetails()}> User Details</Button>}
{!this.state.isAddUser && <Button variant="primary" onClick={() => this.onCreate()}>Add User</Button>}
<br></br>
{!this.state.isAddUser && <UserList editUser={this.editUser} />}
{userForm}
</Container>
</div>
);
}
}
export default UserActionApp;
Could you please help out in pointing out the error. Also I am using a different name for the file and the component. Is that causing an issue?

I think your issue comes from here, try this way:
render() {
return (
<div className="App">
<Container>
<h1 style={{ textAlign: 'center' }}>CURD operation in React</h1>
<hr></hr>
{!this.state.isUserDetails && <Button variant="primary" onClick={() => this.onDetails()}> User Details</Button>}
{!this.state.isAddUser && <Button variant="primary" onClick={() => this.onCreate()}>Add User</Button>}
<br></br>
{!this.state.isAddUser && <UserList editUser={this.editUser} />}
{((this.state.isAddUser || this.state.isEditUser) && (
<AddUser onFormSubmit={this.onFormSubmit} user={this.state.userData} />
)) || null}
</Container>
</div>
);
}
}
The reason for this is that if your condition inside render is false, userForm is undefined and react tries to render undefined, running into problems.
Hope this helps.

Sending API data in Gatsby to be used in Chart.js

I am trying to send API data being called from my index.js to my ChartData.js. index.js is a page and ChartData.js is a component in Gatsby, so to begin with I could not figure out if Gatsby's Link to="" function only work from one page to another or if it can send data from a page to a component.
The issue is when I try to access the sent data from index.js to ChartData.js in the line {props.location.state.companyName} I am getting the error: TypeError: props.location is undefined
I plan to switch out labels: ['x', 'y'] for something like labels: [{props.location.state.companyName}, {props.location.state.symbol} etc. I am not sure if this would be the correct syntax either.
A more detailed explanation here: https://www.youtube.com/watch?v=No9cqzqlKS0&feature=youtu.be
index.js:
import React from "react"
import { Link } from "gatsby"
import axios from "axios"
import "../css/style.css"
import Layout from "../components/layout"
import { symbol } from "prop-types"
import ChartData from "../components/ChartData"
export default class index extends React.Component {
state = {
companyName: "",
previousClose: "",
marketCap: "",
change: "",
symbol: "",
topStocks: [],
Yearweekhigh: "",
Yearweeklow: "",
avgTotalVolume: "",
peRatio: ""
}
componentDidMount() {
const API_KEY = '*******************';
axios.get(`https://cloud.iexapis.com/stable/stock/market/previous?token=${API_KEY}`)
.then(res => {
console.log(res)
const topStocks = res.slice(1);
this.setState({ topStocks })
})
}
clickHandler = (event) => {
if (event.keyCode === 13) {
const query = event.target.value;
const API_KEY = '*******************';
axios.get(`https://cloud.iexapis.com/stable/stock/${query}/quote?token=${API_KEY}`)
.then(res => {
const companyName = res.data['companyName'];
this.setState({ companyName })
const previousClose = res.data['previousClose'];
this.setState({ previousClose })
const marketCap = res.data['marketCap'];
this.setState({ marketCap })
const change = res.data['change'];
this.setState({ change })
const symbol = res.data['symbol'];
this.setState({ symbol })
const Yearweekhigh = res.data['week52High'];
this.setState({ Yearweekhigh })
const Yearweeklow = res.data['week52Low'];
this.setState({ Yearweeklow })
const avgTotalVolume = res.data['avgTotalVolume'];
this.setState({ avgTotalVolume })
const peRatio = res.data['peRatio'];
this.setState({ peRatio })
})
}
}
render() {
return (
<Layout>
<div class = "main-div">
<input type="search" class="main-search" onKeyDown={event => this.clickHandler(event)}/>
<table>
<tr>
<th>Ticker-Symbol</th>
<th>Market Cap</th>
<th>Previous Close</th>
</tr>
<tr>
<td>
<Link to='/details/' state={{
setState: this.state.symbol,
companyName: this.state.companyName,
previousClose: this.state.previousClose,
marketCap: this.state.marketCap,
change: this.state.change,
Yearweekhigh: this.state.Yearweekhigh,
Yearweeklow: this.state.Yearweeklow,
avgTotalVolume: this.state.avgTotalVolume,
peRatio: this.state.peRatio
}}>
{this.state.symbol}</Link>
<Link to='/ChartData/' state={{
setState: this.state.symbol,
companyName: this.state.companyName,
previousClose: this.state.previousClose,
marketCap: this.state.marketCap,
change: this.state.change,
Yearweekhigh: this.state.Yearweekhigh,
Yearweeklow: this.state.Yearweeklow,
avgTotalVolume: this.state.avgTotalVolume,
peRatio: this.state.peRatio
}}></Link>
</td>
<td>{this.state.marketCap}</td>
<td>{this.state.previousClose}</td>
</tr>
</table>
</div>
<div>
{
this.state.topStocks.length && this.state.topStocks.map(stock => (
<h1>{stock.symbol}</h1>
))
}
</div>
<ChartData />
</Layout>
)
}
}
details.js
//import { Link } from "gatsby"
import axios from 'axios';
import React, { useEffect, useState } from 'react';
import Layout from '../components/layout';
import "../css/style.css"
const Details = props => {
const [yourState, setYourState] = useState('');
useEffect(() => {
}, []);
return <Layout>
<div>
<h1 class="details-company-name">{props.location.state.companyName}</h1>
<div class = "details-div">
<div class="details-div-1">
<p>Open {} </p>
<p>High {} </p>
<p>Low {} </p>
<p>52 WK HIGH <h2>{props.location.state.Yearweekhigh}</h2> </p>
<p>52 WK LOW <h2>{props.location.state.Yearweeklow}</h2> </p>
</div>
<div class="details-div-2">
<p>VOLUME</p>
<p>AVG VOL <h2>{props.location.state.avgTotalVolume}</h2> </p>
<p>MKT CAP <h2>{props.location.state.marketCap}</h2></p>
<p>P/E RATIO <h2>{props.location.state.peRatio}</h2></p>
<p>DIV/YIELD</p>
</div>
</div>
</div>
</Layout>;
};
export default Details;
ChartData.js
import React, {useState, useEffect } from "react";
import { Line } from "react-chartjs-2";
const ChartData = props => {
const [yourState, setYourState] = useState('');
const chart = () => {
setYourState({
labels: ['x', 'y'],
datasets: [
{
level: 'level of xyz',
data: [22, 55]
}
]
})
}
useEffect(() => {
chart()
}, [])
return(
<div>
<h1>Hello</h1>
{props.location.state.companyName}
<div>
<Line data={yourState}/>
</div>
</div>
)
}
export default ChartData;

There's a quite a bit going on here that needs clarification. You mention graphql in the title, but there's no graphql in your code.
You are using axios to fetch data at runtime in the componentDidMount lifecycle method, and then setting the result to state.
I assume that once you have that data, all you want to do is pass it to your chart component so that it can render itself on the index page.
Consider the following example which does the same thing; Fetches some data from the Rick & Morty api, sets the results to state, and passes the relevant part of that state via props directly to the <Characters /> component.
From there, the <Characters /> component has everything it needs in order to render. (It has no state, and is not concerned about where the data actually came from).
// index.js
import React from 'react';
import './App.css';
import Characters from './Characters'
const api = "https://rickandmortyapi.com/api/character/";
class IndexPage extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
items: []
};
}
componentDidMount() {
fetch(api)
.then(res => res.json())
.then(
json => {
console.log(json)
this.setState({
isLoaded: true,
data: json.results
});
},
// Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow
// exceptions from actual bugs in components.
error => {
this.setState({
isLoaded: true,
error
});
}
);
}
render() {
const { error, isLoaded, data } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<Characters data={data} />
);
}
}
}
export default IndexPage;
// Characters.js
import React from 'react';
class Characters extends React.Component {
render() {
return (
<ul>
{this.props.data.map(item => (
<li key={item.id}>
<dl>
<dt>Name:</dt>
<dd>{item.name}</dd>
<dt>Species:</dt>
<dd>{item.species}</dd>
<dt>Status:</dt>
<dd>{item.status}</dd>
</dl>
</li>
))}
</ul>
);
}
}
export default Characters;
Codesandbox Example using functional components and hooks
Gatsby’s <Link> component allows you to link between pages (and does some other stuff like prefetching resources, and can share data between pages). As you are rendering the <ChartData /> component on the index page, this is not required to solve your problem.
Using <Link> with state works because details is a gatsby page. As <ChartData> is not a page, you can't *link* to it.

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function... after clicking the Add button

I am trying to run my React application, it compiles successfully (with warnings) but get this error message when I try to click the button.
Here is my App.js:
import React from "react";
import { Component } from "react";
import { Button } from "react-bootstrap";
import Gift from "./Gift.js";
export default class App extends Component {
constructor() {
super();
this.state = { gifts: [] };
}
addGift = () => {
const { gifts } = this.state;
const ids = this.state.gifts.map(gift => gift.id);
const max_id = ids.length > 0 ? Math.max(ids) : 0;
gifts.push({ id: max_id + 1 });
this.setState({ gifts });
};
removeGift = id => {
const gifts = this.state.gifts.filter(gift => gift.id !== id);
this.setState = { ...gifts };
};
render() {
return (
<div>
<h2>Gift Giver</h2>
<div className="gift-list">
{this.state.gifts.map(gift => {
return (
<Gift key={gift.id} gift={gift} removeGift={this.removeGift} />
);
})}
</div>
<Button className="btn-add" onClick={this.addGift}>
Add Gift
</Button>
</div>
);
}
}
The component that I am importing:
import React from "react";
import { Component } from "react";
import {
Form,
FormGroup,
FormControl,
ControlLabel,
Button
} from "react-bootstrap";
export default class Gift extends Component {
constructor() {
super();
this.state = { person: "", present: "" };
}
render() {
return (
<div>
<Form>
<FormGroup>
<ControlLabel>Person</ControlLabel>
<FormControl
onChange={event => this.setState({ person: event.target.value })}
className="input-person"
/>
<ControlLabel>Present</ControlLabel>
<FormControl
onChange={event => this.setState({ present: event.target.value })}
className="input-present"
/>
</FormGroup>
</Form>
<Button
className="btn-remove"
onClick={() => this.props.removeGift(this.props.gift.id)}
>
Remove Gift
</Button>
</div>
);
}
}
I get this warning compilation
Trace: The node type SpreadProperty has been renamed to SpreadElement
at Object.isSpreadProperty (C:\Users\ForAHumanPerson\Desktop\react_tdd\react-quick-start\node_modules#babel\types\lib\validators\generated\index.js:4512:11)
at hasSpread (C:\Users\ForAHumanPerson\Desktop\react_tdd\react-quick-start\node_modules\babel-plugin-transform-object-rest-spread\lib\index.js:38:13)
at PluginPass.ObjectExpression (C:\Users\ForAHumanPerson\Desktop\react_tdd\react-quick-start\node_modules\babel-plugin-transform-object-rest-spread\lib\index.js:234:14)
at newFn (C:\Users\ForAHumanPerson\Desktop\react_tdd\react-quick-start\node_modules#babel\traverse\lib\visitors.js:179:21)
at NodePath._call (C:\Users\ForAHumanPerson\Desktop\react_tdd\react-quick-start\node_modules#babel\traverse\lib\path\context.js:55:20)
at NodePath.call (C:\Users\ForAHumanPerson\Desktop\react_tdd\react-quick-start\node_modules#babel\traverse\lib\path\context.js:42:17)
at NodePath.visit (C:\Users\ForAHumanPerson\Desktop\react_tdd\react-quick-start\node_modules#babel\traverse\lib\path\context.js:90:31)
at TraversalContext.visitQueue (C:\Users\ForAHumanPerson\Desktop\react_tdd\react-quick-start\node_modules#babel\traverse\lib\context.js:112:16)
at TraversalContext.visitSingle (C:\Users\ForAHumanPerson\Desktop\react_tdd\react-quick-start\node_modules#babel\traverse\lib\context.js:84:19)
at TraversalContext.visit (C:\Users\ForAHumanPerson\Desktop\react_tdd\react-quick-start\node_modules#babel\traverse\lib\context.js:140:19)
And also get a similar warning to the Uncaught Error during testing with Jest.

The problem with this line:
removeGift = id => {
const gifts = this.state.gifts.filter(gift => gift.id !== id);
this.setState = { ...gifts }; <---------------
};
this.setState is a method in React.
You have to call it with
this.setState({gifts});
spread operation (...) here is not necessary since gifts is already an array.