How to Use a Function from Another File in React

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

Call JS function from another file in React?

You can export it, or am I missing your question

//slideshow.js
export const plusSlides = (n)=>{
    showSlides(slideIndex += n);
}

and import it where you need to

//Homepage.js
import {plusSlides} from './slideshow'

handleClick (event) {
        plusSlides(1); 
    }

React Calling function from another file and useEffect

you need to add this line at the bottom of file1

export {fetchUserAllPhotos}

In general, every time you want to import function, array, object etc it should look like this:

file1:

const func = () => {
  //implementaion of the function
}

export {func}

file2:

import {func} from './file1' //you need to give the path of file1


func() //now you can use the fanction everywhere in file2

note: you can export as many functions as you wants just be careful it important to use the same name in the export and in the import

export {func1, func2, func3, obj1, abj2, arr1, arr2}

if you are exporting function from react component you need to define the function outside the component

const func = () => {

}

export default function MyReactComponent(prop) {
//implementation of your component
}

export {func}

If you need to use prop of your component inside the function you can pass this prop as a function parameter.

I recomend to avoid from exporting function from react component because when your project becomes bigger it will start to be frustrate to find were you impliment each fanction. instead it is a best practice to add a new js file that you implement there all the fetches function, I usually call this file api.js
This file should look something like this (I took this code from my project there I used axios to make the fetches to the server):

import axios from "axios"

const url = 'http://localhost:8080'

const api = {
getQuestions : async () => {
   return axios.get(`${url}/question/all`)
 },
getQuestionById : async (id) => {
   return axios.get(`${url}/question/${id}`)
 }
}

export default api;

Call function from another React file

I guess this pictures is self-explanatory and will help you to know where you are going wrong

Call a function from a class in a different file - React

Your inclusion of the react-hooks tag suggest your hunch that hooks are applicable to solving your problem. I would agree -

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>

module.exports = {

   A: funtion(){
   },

   B: funtion(){
   }

}

import {A} from 'something';

export A(){
}

export B(){
}

import {A} from 'something';