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

Question

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);

Don't write your components like this. Your TodoFormAdd just trying to dispatch something, but does not do anything about rendering. So why are you trying to separate your component? And when you connect your component to Redux you don't need to pass store to it. You have dispatch as props. I revisited my code in the other question. Look the code and start with as simple as possible. — devserkan, Mar 31 '18 at 22:00
@devserkan "So why are you trying to separate your component" - because, I want to separate my presentation from container — Max Wolfen, Mar 31 '18 at 22:09
Sorry the misunderstanding, I'm not asking why you want to separate your components. If one of your components is just doing a dispatch, why do you need to separate it? This is not the right way. In your previous question where you gave Redux documentation, there are good examples for this. Container connects to Redux, render the pres. component, pass the necessary things. If you do like you are doing here, for example how will you pass any state to your pres. component in the future? — devserkan, Apr 01 '18 at 00:15

JJJ · Accepted Answer · 2018-03-31T22:08:47.457

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)

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

1 Answers1