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
– devserkan, Commented Mar 31, 2018 at 22:00
@devserkan "So why are you trying to separate your component" - because, I want to separate my presentation from container — Max Wolfen
– Max Wolfen, Commented Mar 31, 2018 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
– devserkan, Commented Apr 1, 2018 at 0:15

JJJ · Accepted Answer · 2018-03-31 22:08:47Z

2

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)

edited Mar 31, 2018 at 22:08

answered Mar 31, 2018 at 22:00

JJJ

3,3525 gold badges31 silver badges45 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related