Function not defined error reactjs

Question

I have one function in Action file and need to call it from componenent file with parameters but while calling it, its giving error for function not defined

Component Code :

    handleClick(e){

         addinput({input1:this.refs.inp1.value,input2:this.refs.inp2.value}) // This function I have defined in action file

      }

Action file code :

export function addinput(myval1) {
 return {
   type: 'ADD_INPUT',
   payload: myval1
 };
}

I am getting below error in console

Uncaught ReferenceError: addinput is not defined

Whats I am doing wrong here !!

Answer 1

What you need to do is import the function from action file in your component like

import {addinput} from './path/to/action'

and I am assuming your usiong redux, you can bind the action to props with connect and bindActionCreators function

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'

...

class MyComponentName extends React.Component{

  handleClick = (e) => {
        this.props.addinput({input1:this.refs.inp1.value,input2:this.refs.inp2.value}) 

      }
}

function mapDispatchToProps(dispatch){
     return bindActionCreators({addInput}, dispatch)
}
export default connect(null, mapDispatchToProps)(MyComponentName)