I am making a comments component wherein I get data from a local stored json file. I import the data in the variable data and set its corresponding fields to my state values. But when I pass the data through the context, it says that it is undefined.
data.json
{
"currentUser": {
"image": {
"png": "./images/avatars/image-juliusomo.png",
"webp": "./images/avatars/image-juliusomo.webp"
},
"username": "juliusomo"
},
"comments": [
{
"id": 1,
"content": "Impressive! Though it seems the drag feature could be improved. But overall it looks incredible. You've nailed the design and the responsiveness at various breakpoints works really well.",
"createdAt": "1 month ago",
"score": 12,
"user": {
"image": {
"png": "./images/avatars/image-amyrobson.png",
"webp": "./images/avatars/image-amyrobson.webp"
},
"username": "amyrobson"
},
"replies": []
}
]
}
this is how I store and pass data context.js
import data from "./data";
const AppContext = React.createContext();
const AppProvider = ({ children }) => {
const { comments, setComments } = useState(data.comments);
const { currUser, setCurrUser } = useState(data.currentUser);
return (
<AppContext.Provider value={{ comments, currUser }}>
{children}
</AppContext.Provider>
);
};
this is where I get the error App.js
import { useGlobalContext } from "./context";
const App = () => {
const { comments, currUser } = useGlobalContext();
...
}
The useState hook returns an array, not an object. Array destructuring assignment is used. First element is the state value, the second is the state updater function.
const AppProvider = ({ children }) => {
const [comments, setComments] = useState(data.comments);
const [currUser, setCurrUser] = useState(data.currentUser);
return (
<AppContext.Provider value={{ comments, currUser }}>
{children}
</AppContext.Provider>
);
};