DEV Community

ivkeMilioner
ivkeMilioner

Posted on

Hot to call this function from another component in react?

Hot to call this function from another component in react?

function uCyr() {

var entered_text;

entered_text = document.getElementById('textarea').value;

entered_text = entered_text.replace(/a/g, 'b');

document.getElementById('textarea').style.color = '#9C27B0';
document.getElementById('textarea').value = entered_text;

}

Discussion (9)

Collapse
dance2die profile image
Sung M. Kim • Edited on

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.

Collapse
ivkemilioner profile image
ivkeMilioner Author

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

Collapse
dance2die profile image
Sung M. Kim

You're welcome & have fun with React~

Collapse
warriorofsunlight profile image
WarriorOfSunlight

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

Collapse
ivkemilioner profile image
ivkeMilioner Author • Edited on

Call from here import React from "react";
import "./styles.css";
import './Ucyr';

import { Ucyr } from './Ucyr';

export default function App() {

return (









);

}
Collapse
welingtonms profile image
Welington Silva

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()

Collapse
ivkemilioner profile image
ivkeMilioner Author
Collapse
seanmclem profile image
Seanmclem

Where are the components?

Collapse
ivkemilioner profile image
ivkeMilioner Author