DEV Community


Discussion on: Hot to call this function from another component in react?

dance2die profile image
Sung M. Kim • Edited

My reply is based off on your Sandbox:

You can follow along w/ my fork:

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>


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. or other materials of your choice because it's a very basic React knowledge required.

ivkemilioner profile image
ivkeMilioner Author

Thank you very much. You've helped me a lot

dance2die profile image
Sung M. Kim

You're welcome & have fun with React~