Hot to call this function from another component in react?

My reply is based off on your Sandbox: codesandbox.io/s/strange-dust-98uwd

You can follow along w/ my fork: codesandbox.io/s/objective-mcnulty...

Here are a few things worth mentioning.

First issue

You are exporting uCyr as a default module.

export default uCyr;

That means, you need to either alias it as uCyr in the calling code, or not use {} during import.

// from 
import { Ucyr } from "./Ucyr";
// to either
import Ucyr from "./Ucyr";
// or 
import { default as Ucyr } from "./Ucyr";

2nd issue

To bind an event handler, you shouldn't pass a string to onClick but actual function expression.

// instead of 
<button onClick="Ucyr()">У ЋИРИЛИЦУ</button>
// You should do
<button onClick={() => Ucyr()}>У ЋИРИЛИЦУ</button>
// or using a short-hand syntax
<button onClick={Ucyr}>У ЋИРИЛИЦУ</button>

Recommendation

Instead of getting the textarea using document.getElementById("textarea"), you should store the textarea value as a React state. Or you can use ref (but discouraged).

It seems like you are used to the jQuery's unobstrusive coding style, but React requires a different mindset.

All changes should be state driven.

If you are unfamiliar with React states, I'd recommend React documentation.

reactjs.org/docs/state-and-lifecyc... or other materials of your choice because it's a very basic React knowledge required.

Are you calling this from a functional component or a class component? Where and when do you want to call the component (on mount, after a specific condition, etc.)?

A very generic example of calling a function from JSX

<MyComponent>
   {someCondition ? uCyr() : notUCyr()}
</MyComponent>

A very generic example of calling a function before the return

function MyComponent() {
   uCyr()
   return(
      <OtherComponent />
   )
}

A very generic example of calling a function in useEffect (from react docs)

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    // Clean up the subscription
    subscription.unsubscribe();
  };
});

Helpful links and further reading

reactjs.org/docs/faq-functions.html

reactjs.org/docs/hooks-effect.html

It's a good thing to bind first this function in your constructor, so you won't have a scope problem.

Then you can create a ref in the "another component" and apply it to this component where you have this function. Then you can call this.yourRef.current.uCyr()

Where are the components?