DEV Community

loading...

Hot to call this function from another component in react?

ivkemilioner profile image ivkeMilioner ・1 min read

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)

pic
Editor guide
Collapse
dance2die profile image
Sung M. Kim

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

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
Collapse
seanmclem profile image
Seanmclem

Where are the components?

Collapse
ivkemilioner profile image