How can I access data in another component?

user_11609267 0
Viewed 80

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

reactjs javascript
3 Answers

I have added few lines in your codesandbox. I think this is same that you want to achieve

codesandbox

user_152670600

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)

user_116092670

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.

user_183373910
Related