Call JS function from another file in React?

Question

I have a function in a separate JavaScript file that I would like to call in a React component - how can I achieve this?

I'm trying to create a slideshow, and in slideshow.js, I have this function that increases the current slide index, like so:

function plusSlides(n) {
    showSlides(slideIndex += n);
}

In Homepage.jsx, I have a "next" button that should call plusSlides from slideshow.js when it is clicked, like so:

class NextButton extends React.Component {
    constructor() {
        super();
        this.onClick = this.handleClick.bind(this);
    }

    handleClick (event) {
        script.plusSlides(1); // I don't know how to do this properly...
    }

    render() {
        return (
            <a className="next" onClick={this.onClick}>
                &#10095;
            </a>
        );
    } 
}

KornholioBeavis · Accepted Answer · 2019-09-15 19:28:16Z

108

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

edited Sep 15, 2019 at 19:28

answered Apr 6, 2017 at 18:05

KornholioBeavis

2,4522 gold badges20 silver badges26 bronze badges

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

3 Comments

Emily Yeh Over a year ago

Thank you very much for your help! I figured out what I was doing wrong, and now it works perfectly! :^)

Omar bakhsh Over a year ago

can you explain it in react Hook?

KornholioBeavis Over a year ago

pretty much exactly the same thing, except you wouldnt call it inside a class function

Collectives™ on Stack Overflow

Call JS function from another file in React?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related