I am currently working on a React App that involves CRUD operations connected to a Rails API. The project structure is as follows:
App.js
-> UserIndex
--> Form
--> User
-> User
My goal is to pass a function from <App /> to its grandchild component, <User />, skipping the immediate child.
This is the code for <App />:
import "./App.css";
import User from "./components/User";
import UserIndex from "./components/UserIndex";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { useState, createContext } from "react";
function App() {
const [user, setUser] = useState({});
const UserContext = createContext();
function handleShow() {
console.log("showed!");
}
return (
<div>
<BrowserRouter>
<Routes>
<UserContext.Provider value={handleShow}>
<Route path="/" element={<UserIndex />}></Route>
</UserContext.Provider>
<Route
path="users/:userId"
element={<User id={user.id} name={user.name} email={user.email} />}
/>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
I have imported and created CreateContext, provided it through UserContext.Provider.
And here's the code for <User />:
import React, { useContext } from "react";
import { Link } from "@mui/material";
import axios from "axios";
function User(props) {
const userName = useContext(UserContext);
return (
<div className="centerText">
<Link
href={`/users/${props.id}`}
color="inherit"
onClick={props.handleShow}
>
<h4>{props.name}</h4>
<h4>{props.email}</h4>
</Link>
{props.deleteData && <button onClick={props.deleteData}>Delete</button>}
</div>
);
}
export default User;
While importing useContext, I encountered an error trying to fetch the UserContext that was provided. It kept returning: UserContext is not defined.
I also attempted wrapping all components in UserContext.Provider but the issue persisted:
<BrowserRouter>
<Routes>
<UserContext.Provider value={handleShow}>
<Route path="/" element={<UserIndex />}></Route>
<Route
path="users/:userId"
element={
<User id={user.id} name={user.name} email={user.email} />
}
/>
</UserContext.Provider>
</Routes>
</BrowserRouter>
Despite researching online, most examples feature the same-filename setup, causing no trouble when fetching UserContext. Any idea what might be going wrong? Thank you!
EDIT:
After making corrections, this is how the code now looks:
import "./App.css";
import User from "./components/User";
import UserIndex from "./components/UserIndex";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { useState, createContext } from "react";
export const UserContext = createContext();
function App() {
const [user, setUser] = useState({});
// function handleShow() {
// console.log("showed!");
// }
const handleShow = "fñalksdjfñdlskfjds";
return (
<div>
<BrowserRouter>
<Routes>
<Route
path="/"
element={
<UserContext.Provider value={handleShow}>
<UserIndex />
</UserContext.Provider>
}
></Route>
<Route
path="users/:userId"
element={<User id={1} name={"hey"} email={"there"} />}
/>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
import React, { useContext } from "react";
import { Link } from "@mui/material";
import axios from "axios";
import UserContext from "../App";
function User(props) {
console.log(UserContext);
const userName = useContext(UserContext);
console.log(userName);
return (
<div className="centerText">
<Link
href={`/users/${props.id}`}
color="inherit"
onClick={props.handleShow}
>
<h4>{props.name}</h4>
<h4>{props.email}</h4>
</Link>
{props.deleteData && <button onClick={props.deleteData}>Delete</button>}
</div>
);
}
export default User;