Hot to call this function from another component in react?
ivkeMilioner

ivkeMilioner @ivkemilioner

Location:
Beograd
Joined:
Oct 15, 2019

Hot to call this function from another component in react?

Publish Date: Feb 13 '20
6 9

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;

}

Comments 9 total

  • Welington Silva
    Welington SilvaFeb 13, 2020

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

  • Seanmclem
    SeanmclemFeb 13, 2020

    Where are the components?

  • WarriorOfSunlight
    WarriorOfSunlightFeb 13, 2020

    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

    • ivkeMilioner
      ivkeMilionerFeb 13, 2020

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

      import { Ucyr } from './Ucyr';

      export default function App() {

      return (









      );

      }
  • Sung M. Kim
    Sung M. KimFeb 13, 2020

    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.

    • ivkeMilioner
      ivkeMilionerFeb 13, 2020

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

      • Sung M. Kim
        Sung M. KimFeb 13, 2020

        You're welcome & have fun with React~

Add comment