How do I call a function from component that is not a child nor parent?

Question

Component A

const query = ....

getData(query);

Component B

//here I want to call it using component's A argument

Answer 1

You would probably have a parent around these two components. You can use the parent to share the function:

function Parent() {
    const [ dataWithQuery, setDataWithQuery ] = useState(null);

    return (
        <>
            <ComponentA setDataWithQuery={ setDataWithQuery  } />
            <ComponentB dataWithQuery={ dataWithQuery } />
        </>
    );
}

and in Component A you'd have:

function ComponentA({ setDataWithQuery }) {
    const yourQueryHere = '...'

    function getData(query) { ... }

    useEffect(() => {
        setDataWithQuery(() => getData(yourQueryHere));
    }, []);

    ...
}

Notice the line where I setDataWithQuery(...), I created a new function that calls getData with your query variable. This is how you save the function parameter to be used outside of ComponentA.

and in Component B you'd have:

function ComponentB({ dataWithQuery }) {
    useEffect(() => {
        if(dataWithQuery != null) {
            const data = dataWithQuery();
        }
    }, [ dataWithQuery ]);


    ...
}

But there is no real reason to structure like this. Why not pass up the query from ComponentA to a parent, get the data from the parent using that query, then pass that data to ComponentB?

Edit: you could also look up React Contexts for sharing without passing up and down parent/child. There would still need to be a parent around.

Answer 2

Do you mean, you want to pass a query down to ComponentA, get the data from within it, then use that data in ComponentB?

If that is not what you want and you want to use the same query in each one, then just keep the query parameter in the component above them post and pass them down in props.

If the former is what you want:

Parent Component:

import "./styles.css";
import ComponentA from "./ComponentA";
import ComponentB from "./ComponentB";
import { useState } from "react";

    export default function App() {
      const [query, setQuery] = useState("get some data");
      const [data, setData] = useState({});
      return (
        <div className="App">
          <ComponentA query={query} setData={setData} />
          <ComponentB data={data} />
        </div>
      );

Component A

import React, { useEffect } from "react";

function ComponentA({ query, setData }) {
  useEffect(() => {
    if (query !== "") {
      getData(query);
    }
  }, [query]);

  async function getData(query) {
    //do some stuff
    const result = { id: "1", message: "I am data" };
    setData(result);
  }

  return (
    <div>
      <h1>I am component A</h1>
    </div>
  );
}

export default ComponentA;

ComponentB

function ComponentB({ data }) {

  function doSomethingWithComponentAData() {
    //do stuff with the data from componentA
  }
  return (
    <div>
      <h1>I am Component B, I got data: {data.id}</h1>
    </div>
  );
}

export default ComponentB;

Answer 3

Try this:

// Component A

export const getData = () => { // ... }

// Component B

import { getData } from './ComponentA'

const result = getData()