Reactjs How to Call a Component Function from Another Function on the Same File

const { useState, useEffect } = React

function Time ({ hour, minute, onChange }) {
  const [h,setHour] = useState(hour)
  const [m,setMinute] = useState(minute)
  useEffect(_ => onChange({ hour: h, minute: m }), [h, m])
  return <div>
    <input value={h} onChange={event => setHour(event.target.value)} />
    <input value={m} onChange={event => setMinute(event.target.value)} />
  </div>
}

ReactDOM.render(<Time onChange={console.log} />, document.querySelector("main"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<main></main>

How can I use a function from another file in react?

You can do something like:

function.js

const doSomething = function() {
let i = 0;
    if (this === that) {
        i = 0;
    } else {
       i = 1;
    }

}

export default doSomething;

App.js (for example):

import doSomething from "./function";

class Example extends Component {
    state = {
        test
    };
    render() {
        doSomething()
    return (
        <div>
            <h1>{this.state.test.sample[i].name}</h1>
        </div>
     )

React JS call function within another file in React Component

The easiest way to achieve this is over Context.

The files you should have are:

// ModalContext.js
import {createContext} from 'react'

export default createContext()

// Root.js -> This file should be on top of your application
import React from 'react'
import ModalContext from './ModalContext'

class ModalProvider extends React.Component {
  state = {
    loginOpened: false,
    signupOpened: false
  };

  openModal = modalType => () => {
    if (modalType === "login") {
      this.setState({
        loginOpened: true,
        signupOpened: false
      });
    } else if (modalType === "signup") {
      this.setState({
        loginOpened: false,
        signupOpened: true
      });
    }
  };

  closeModal = modalType => () => {
    if (modalType === "login") {
      this.setState({
        loginOpened: false
      });
    } else if (modalType === "signup") {
      this.setState({
        signupOpened: false
      });
    }
  };

  render(props) {
    return 
      <ModalContext.Provider value={{openModal: this.openModal, closeModal: this.closeModal}}>
        <Modal isOpen={loginOpened} onRequestClose={this.closeModal("login")}>
          <h1>Login</h1>
          <button onClick={this.openModal("signup")}>Open Signup</button>
          <button onClick={this.closeModal("login")}>Close this modal</button>
        </Modal>
        <Modal isOpen={signupOpened} onRequestClose={this.closeModal("signup")}>
           <h1>Sign Up</h1>
           <button onClick={this.openModal("login")}>Open Login</button>
           <button onClick={this.closeModal("signup")}>Close this modal</button>
        </Modal>
        {props.children}
      </ModalContext.Provider>
    )
  }
}

export default

// Anywhere where you need to control your modals
import ModalContext from './ModalContext'

class MyComponent extends React.Component {
  ...
  render(props) {
    return (
      <ModalContext.Consumer>
        {({openModal, closeModal}) => <button onClick={openModal("login")}>Open Login</button>}
      </ModalContext.Consumer>
    )
  }
}

You can check more on Contexts here

---

Related Topics