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

If this is a Redux setup you should probably use dispatch to "communicate" the action to the store. The error here is probably due to a missing "import addinput from './path/to/action/file'" statement. — Sven van de Scheur
– Sven van de Scheur, Commented Jun 6, 2017 at 9:44
I have imported it already in this file : import React from "react"; import {connect} from "react-redux"; import Button from "./Button"; import bindActionCreators from 'redux' import * as TodoActionCreators from "../actions/countActions"; addinput function is in action/counaction file Is there any other thing I am missing — CodeWithCoffee
– CodeWithCoffee, Commented Jun 6, 2017 at 9:49

Shubham Khatri · Accepted Answer · 2017-06-06 09:47:53Z

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)

answered Jun 6, 2017 at 9:47

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

3 Comments

CodeWithCoffee Over a year ago

Thanks Shubham !! It was actually defined in other main App component and I missed to dispatch from there!! Its working fine now !! Thank you again !!

Shubham Khatri Over a year ago

Glad to have helped :)

Shubham Khatri Over a year ago

Could your accept this as an answer if it helped :)

Collectives™ on Stack Overflow

Function not defined error reactjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related