How to call a function from another file in a React component

Question

I want to call a function from a React component. This function will call another function in the component from which it was called.

My component:

import React, { useState } from "react";

// import turnOnGreenLight from "./green.js"; // <-- I want to import this

export const initialLightValues = ["unactive", "unactive"];
export let setLightsVar = initialLightValues;

function App() {

  const [lights, setLights] = useState(initialLightValues);

  function turnOnRedLight() {
    setLightsVar[0] = "active";
    updateLightsState();
    turnOnGreenLight();
  }

  // I want to move this function "turnOnGreenLight" in the file green.js
  function turnOnGreenLight() {
    setLightsVar[1] = "active";
    updateLightsState();
  }

  function updateLightsState() {
    setLightsVar = setLightsVar.slice();
    setLights(setLightsVar);
  }

  return (
    <div className="App">
      <button onClick={() => turnOnRedLight()}>Turn on the lights</button>
      <br />
      <div className={"red-light " + lights[0]}>Red</div>
      <div className={"green-light " + lights[1]}>Green</div>
    </div>
  )
}

export default App

The function in the file green.js would look like this:

import { setLightsVar, updateLightsState } from "./App";

function turnOnGreenLight() {
  setLightsVar[1] = "active";
  updateLightsState();
}

export default turnOnGreenLight;

I'm not sure if what I'm trying to do is possible.

Dmitry Reutov · Accepted Answer · 2019-10-13 20:02:42Z

1

It is possible but you will get circular modules warning, and if you will run jest tests it will throw exception, so if you want to do this better pass the function updateLightsState as a callback parameter - then no problems

function turnOnGreenLight(callback) {
  setLightsVar[1] = "active";
  callback();
}

turnOnGreenLight(updateLightsState)

edited Oct 13, 2019 at 20:02

answered Oct 13, 2019 at 0:10

Dmitry Reutov

3,0321 gold badge9 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nico Over a year ago

Sorry but I fail to understand how to pass the function updateLightsState as a callback parameter.

Collectives™ on Stack Overflow

How to call a function from another file in a React component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related