I'm sorry if my question is too ridiculous, because I'm new to programming.
I created a project with React, I have 3 different components: navbar, sidebar and data.
I received json data from an api using hooks in my data component.
import { useEffect, useState } from "react";
export const Data = () => {
const [data, setData] = useState();
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/todos/1")
.then((response) => response.json())
.then((json) => setData(json));
}, []);
};Now, how can I access the "data" state in the data component from other components?
I don't want to use Context api, because I've heard that it is only used in cases where the state affects all components, like authentication
thanks in advance for your help
I have added few lines in your codesandbox. I think this is same that you want to achieve
Thank you to everyone who helped me. Actually, I realized that the title is not correct. What I wanted to do was to use the data brought outside the component inside the component. I did this by creating custom hooks. If anyone is curious, I leave the code below.
import { useEffect, useState } from "react";
export default function useData(id = 1) {
const [data, setData] = useState([]);
useEffect(() => {
fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
.then((response) => response.json())
.then((json) => setData(json));
}, []);
return { data };
}Then I import and use the useData hook I created in any component.
(I'm not even sure it's called a hook.)
Example: const {data} = useData(4)
You could maybe use the module.exports function in the data component and then just call it in the necessary components. For example:
import { useEffect, useState } from "react";
export const Data = () => {
const [data, setData] = useState();
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/todos/1")
.then((response) => response.json())
.then((json) => setData(json));
}, []);
};
module.exports = data;
Then in the navbar component for example you call it and use it where it is necessary:
const Navbar = () => {
const data = require(../Data)
...
...
...
}
Hope it helps.