in React, how to call a function living in another component?

Question

in my react's App.js 's return i am currently calling this.searchVenues() in a way that works but is messy and i know there is a better way. The searchVenues() function lives in App.js and I have buttons that need to be in their own component, then just <ButtonComponent/> instead of:

render() {
    return (
      <div className="App container-fluid">
        <Navbar/>
        <div className="row">
          <div className="col-xs-3">
          <button onClick ={() => this.searchVenues("yoga+coffee", "5")}>5</button>
            <button onClick ={() => this.searchVenues("yoga+coffee", "10")}>10</button>
            <button onClick ={() => this.searchVenues("yoga+coffee", "15")}>15</button>
            <SideBar {...this.state} handleListItemClick={this.handleListItemClick}/>
          </div>
          <div className="col-md-9 full-height">
            <Map {...this.state}
            handleMarkerClick={this.handleMarkerClick}/>
          </div>
        </div>
        <Footer/>
      </div>
    );
  }

but when i do this.searchVenues("yoga+coffee", "5") does not work, understandably so. What's the best or a better way to make it work? How do i access the function from another file ( component )?

Answer 1

I believe you want to declare your searchVenues func in App.js component like this:

searchVenues = (arg1, arg2) => {here is the body of your function}

... and pass it down to the ButtonComponent using props:

<ButtonComponent searchVenues={this.searchVenues}

Once you are in your stateless ButtonComponent, you can create a new function inside it if you want to avoid anonymous functions in your render ( you can read on it here )

const searchVenues = (arg1, arg2) => { 
    return event => {props.searchVenues(arg1, arg2);}
}

... and add it to the onClick event:

<button onClick ={searchVenues('coffee+yoga', props.value)}>{props.value}</button>

Answer 2

If you want your buttons to live in another component, but receive handlers from another component, you can pass them down through props.

import React, { Component } from 'react'
import MyButton from './MyButton'

export default class App extends Component {

    buttonClickHandler= () => {
        alert('I have been clicked!')
    }

    render = () => (
        <MyButton onClickHandler={this.buttonClickHandler} />
    )
}

And here is the MyButton component file:

import React from 'react'

const MyButton = (props) => (
    <button onClick={props.onClickHandler}>Click Me for an Alert!</button>
)

export default MyButton

Answer 3

You could either have searchVenues defined in your ButtonComponent or pass it to ButtonComponent as a prop. Then in your ButtonComponent render function you would do the same thing:

<button onClick ={() => this.searchVenues("yoga+coffee", "15")}>15</button>

or if it is passed as a prop

<button onClick ={() => this.props.searchVenues("yoga+coffee", "15")}>15</button>

I will also add that @Bryan is absolutely right about services. Lets say for instance you have a table in a database called Product . Well, you don't want to implement getAllProducts() in every component that needs a list of products. Instead, you would create a class called ProductService where getAllProducts() would be defined. Then, for any component that needs a list of products, you would import the ProductService class and call ProductService.getAllProducts() .

Hope that helps.

Answer 4

If you want to execute methods from any component, and the result of those methods will change the global state of the app, you might benefit from using actions . Whether you're using flux or redux architecture, actions can be triggered from any part of the app, and perform changes in the global state, this changes will be reflected on any component that is listening to this state.

https://reactjs.org/blog/2014/07/30/flux-actions-and-the-dispatcher.html https://redux.js.org/basics/actions