How to pass function in another file in React

Question

I have a function that is used to change the state of a react component but I'm trying to pass the function in another file. I get the error that the function I'm trying to pass (changeView) is not defined.

This is the App.js

export default class App extends Component { constructor() { super(); this.state = { language: "english", render: '' } } changeView(view, e){ console.log(view); this.setState({render: view}); } _renderSubComp(){ switch(this.state.render){ case 'overview': return <Overview /> case 'reviews': return <Reviews /> } } render() { const {render} = this.state return <Fragment> <Header language={this.state.language} /> <Hero /> <Navigation render={render}/> {this._renderSubComp()} </Fragment>; }

}

I'm trying to pass the changeView method to the Navigation.JS component, so I can change the active link as well as render the components listed in the _renderSubComp method above.

 import React from "react"; import "./navigation.css"; import { changeView } from "../app"; export default function Navigation() { return <div className="navigation"> <a onClick={this.changeView.bind(this, 'overview')}>Overview</a> <a>Reviews</a> </div>; }

How should I pass the function to another file so it's able to change the state of my component and render the component I need.

You may need a state management library/framework, please read more about Redux or MobX](mobx.js.org) it allows you to have a common state where many components can watch/change it — Fcmam5
– Fcmam5, Commented Aug 17, 2018 at 1:28
You are exactly looking for callbacks in React. Pass the event handler function as a props to Navigation and there in onClick call as this.props.changeView. Never do binding directly in render because it creates a new function every time your component renders and re renders so either you do it in constructor or use arrow function. — Hemadri Dasari
– Hemadri Dasari, Commented Aug 17, 2018 at 2:20

devserkan · Accepted Answer · 2018-08-17 01:35:51Z

You can't import a method like that. You will pass your function like any other prop to your component and you use there.

I've changed a few things. Firstly, I define changeView function as an arrow one, so we don't need to bind it. Secondly, I pass this function to the component as a prop. Thirdly, I used this function there like:

onClick={() => props.changeView('overview')}

As you can see it is props.changeView not state.changeView

Just go through the official documentation a little bit more. You are confused about states, props and how to pass them to your components.

class App extends React.Component { constructor() { super(); this.state = { language: "english", render: '' } } changeView = (view, e) => { console.log(view); this.setState({ render: view }); } render() { const { render } = this.state return <div> <Navigation render={render} changeView={this.changeView} /> </div>; } } const Navigation = (props) => { return <div className="navigation"> <a onClick={() => props.changeView('overview')}>Overview</a> <a>Reviews</a> </div>; } ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>

Collectives™ on Stack Overflow

How to pass function in another file in React

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related