3

I see this topic You must pass a component to the function returned by connect. Instead received undefined, but it's does not about my case.

So, I cannot undurstand what is the wrong with my presentation/container connection?

I connect they one to each other, but I get an error: You must pass a component to the function returned by connect. Instead received undefined

/* COMPONENT */ 

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

class TodoForm extends React.Component{   
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(e) {
        e.preventDefault();

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

    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 */

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

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

export default connect(TodoFormAdd)(TodoForm);
Max Wolfen
  • 1,923
  • 6
  • 24
  • 42

3 Answers3

2

Solved:

The problem had been in the closer of invoke these two codes in one time of running.

So the chain is the next:

  1. We start the component TodoForm that also try to import TodoFormAdd;
  2. TodoFormAdd does not already got the parameters to work and start begins to crash.
  3. Then TodoForm cannot finish compilation themself and aslo crash.

And that it. So I just delete import TodoFormAdd in TodoForm and and everything became good.

Thank's for all for help!

Max Wolfen
  • 1,923
  • 6
  • 24
  • 42
1
import TodoForm from '../Components/TodoForm/TodoForm'.

1) Is TodoForm defined?, console.log it 2) Is TodoForm component? go through you file structure and see the file, is file exists? is component exists in this file?

Artem Mirchenko
  • 2,140
  • 1
  • 9
  • 21
  • 1. Yes, defined. It's strange, but console.log really shows `undefined` state for `TodoForm ` from `TodoFormAdd` container. 2. Yes, `TodoForm` is a component. Moreover, if the file will does not exist, the compilation will be not completed. So this is must be an another reason, why we still get `undefined` for `TodoForm` component calling from `TodoFormAdd` – Max Wolfen Mar 31 '18 at 17:22
  • @Max Wolfen Okay try to export yur component like this `connect(null, { TodoFormAdd })(TodoForm);` – Artem Mirchenko Mar 31 '18 at 17:52
1

From react-redux API Doc:

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

connect(..) takes mapStateToProps function as its first argument, and your TodoFormAdd doesn't seem like a valid mapStateToProps, which should take the store state as its input, and return a plain object

The results of mapStateToProps must be a plain object which will a plain object, which will be merged into the component’s props

I recommend reading the redux doc and its examples multiple times, until you understand the concepts well.

I won't write the whole code for you, but in your case, TodoFormAdd seems redundant.

Just make TodoForm component a container (i.e. 'connected') component, and you get dispatch(..) for free passed through props!

It will look similar to this:

class TodoForm extends React.Component {
    ...

    handleSubmit(e) {
        const { dispatch } = this.props;
        e.preventDefault();

        document.querySelector('input').input.value = '';   
        dispatch(AddTodo(input));
    }

    ...
}

function mapStateToProps(state) {
  return {
  // your mapStateToProps return object
  };
}

export default connect(mapStateToProps)(TodoForm);
Eric
  • 2,635
  • 6
  • 26
  • 66