Reuse data from API in another component | REACT

Question

I want to fetch some data from an API and then use it everywhere, even outside the component. To be more specific, I managed to fetch some data through an API and are able to do some manipulation about it in the component where I did the call to fetch, but how can I still get access to those fetched data when I am in another component?

In Tables.js I did the call to fetch from API and created a table for it.

import React, { useEffect, useState} from 'react';
const Tables = () => {
    const [users, setUser] = useState([]);

    useEffect(() => {
        fetch(TEST_URL)
        .then((res) => res.json())
        .then((data) => {
           setUser(data);
            console.log(data)
        });
    }, []);

    return (
        <div>
            <Table striped bordered hover>
                <thead>
                    <tr>
                        <th>NAME</th>
                        <th>ADDRESS</th>
                    </tr>
                </thead>
                <tbody>
                    {users}.map((m) => (
                        <tr key={m.id}>
                            <td>{m.name}</td>
                            <td>{m.address}</td>
                        </tr>
                    ))}
                </tbody>
            </Table>
        </div>

        
    );
}

export default Tables

And the data in the API looks like this:

[
{
 "id": 1,
 "name": "decster",
 "address": "space",
 "phone": "123"
}
]

Now I have another component called TableDetails.js, I would like to use the data from the API without re-fetching it, and create a table rendering a different part of that data, for example: displaying "name" and "phone" from the JSON data this time. How should I do it?

import Tables from "./Tables.js";

function TableDetails() {
    return (
        <div>
            <h2> 
                <Tables Tables {users} = {columns}>
            </h2>
        </div>
    )
}

export default TableDetails

Another small issue I have is that after fetching the data in Tables.js, it repeatedly print the data in the console log twice? I am very nice to REACT and also JS, so any tips would be very helpful! Thanks

Pass it as props: reactjs.org/docs/components-and-props.html — SakoBu
– SakoBu, Commented Sep 4, 2022 at 15:48

mahooresorkh · Accepted Answer · 2022-09-05 06:34:24Z

The fact that the console.log runs twice can be because of using the React.StrictMode wrapper in the root of the project (index.js).

If you want the API to run somewhere and its data can be accessed in other components, you need a state manager like Redux Toolkit or in the simpler form, you can use useContext.

Here I write a solution for your problem using useContext.

Create a context called DataContext and in the App component, wrap all the content around it.(I am using jsonplaceholder fake data here)

export const DataContext = createContext();

function App() {
  const [data, setData] = useState([]);
  const callApi = () => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(json => setData(json));
  }
  return (
    <DataContext.Provider value={{data, callApi}}>
      <C1 />
      <C2 />
    </DataContext.Provider>
  );
}

Now callApi function and data value are accessible inside each child component. C1 calls getPosts API using callApi from context.

export default function C1() {
    const { callApi } = useContext(DataContext);
    useEffect(() => {
        callApi();
    }, [])
    return (
        <>This is C1 component. It calls the API.</>
    )
}

C2 can get API result from data value of the context.

export default function C2() {
    const { data } = useContext(DataContext);
    return (
        <>
            <div>
                This is C2 it gets API data from DataContext which has been called by C1
            </div>
            {
                data && data.map((post,index) => 
                    <p key={index}> { JSON.stringify(post) } </p>
                )
            }
        </>
    )
}

I think I will go for another solution other than useContext, but what you mentioned about the StrictMode solved my issue. I will accept this answer.

Collectives™ on Stack Overflow

Reuse data from API in another component | REACT

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related