CODEWITHSUNDEEP
reactjsredux
Max Wolfen
Max Wolfen

Reputation: 2033

Redux/React. TypeError: Cannot call a class as a function

So, I have a problem with the error like said in the title of question. I saw this answer Getting "Cannot call a class as a function" in my React Project , but I do not have any problem with Component extends, as you can see it implemented in the code normally.

So, the question is - what is the problem is? I already cannot figure out..

/* COMPONENT */

import React from 'react';
import AddTodo from '../../Actions/AddTodo'
import TodoFormAdd from '../../Containers/TodoFormAdd'

class TodoForm extends React.Component{   
    constructor(props) {
        super(props);
    }

    handleSubmit = (e) => {
        e.preventDefault();

        let input = document.querySelector('input').value; 
        TodoFormAdd(this.props.store, input);  
        input = '';
    }

    render() {
        return (
            <form id="tp" onSubmit={this.handleSubmit}>
                <input type="text" placeholder="Your text" />
                <button type="submit">Add todos</button>
            </form>
        );  
    }
}
export default TodoForm;

/* CONTAINER FOR A COMPONENT ABOVE */

import { connect } from 'react-redux';
import AddTodo from '../Actions/AddTodo'
import TodoForm from '../Components/TodoForm/TodoForm'

let TodoFormAdd = (store, input) => {
    store.dispatch(AddTodo(input));
}

export default connect()(TodoForm);

Upvotes: 0

Views: 2540

Answers (1)

JJJ
JJJ

Reputation: 3332

The problem is you are exporting a component from /Containers/TodoFormAdd in this line:

export default connect()(TodoForm)

It looks like you want to pass the dispatch to your component. You need to pass a mapDispatchToProps function to your connect function:

const mapPropsToDispatch = dispatch => {
  return {
    todoFormAdd: input => dispatch(addTodo(input))
  }
}

connect(null, mapDispatchToProps)(TodoForm)

Then from your component, you can call the dispatch.

//TodoForm Component
this.props.todoFormAdd(input)

Upvotes: 2

Related Questions