S
S
Sergey Alekseev2018-03-19 15:32:36
React
Sergey Alekseev, 2018-03-19 15:32:36

React + Redux, why won't the container connect?

Good evening, I get an error:
You must pass a component to the function returned by connect. Instead of received undefined
Component view list of projects:

export class ListProject extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isOpen: false
        };
        this.addProject = this.addProject.bind(this);
        this.showModal = this.showModal.bind(this);   
    }

    componentWillMount() {
        this.props.loadProjects(window.localStorage.getItem("userId"));
    }

    addProject() {
        this.setState({isOpen: false});
        let typeProject = document.getElementsByClassName("selected")[0].textContent.toLowerCase();
        this.props.createProject(typeProject, this.props.numberProject);
    };

    showModal() {
        if (this.state.isOpen === false) {
            this.setState({isOpen: true});
        } else {
            this.setState({isOpen: false});
        }
    }


    render() {


        return (
            
                <ul>
                   
                    {

                        this.props.projects.map(function(item){
                            return <ProjectContainer
                                key={uniqueKey(item.name)}
                                name={item.name}
                                type={item.projecttype}
                                projectId={item.id}
                            />
                        })

                    }

                    <button id="project_add" onClick={this.showModal}>
                        <span>+ ADD PROJECT</span>
                    </button>


                    <ModalAddProject
                        show={this.state.isOpen}
                        onClose={this.addProject}
                     />
                   

                </ul>
            
        );
    }

}

Компонент контейнер один проект
import { connect } from "react-redux";

import { Project } from "../../Components/Customer/Project";



const ProjectContainer = connect(
    state => ({
        sequences: state.customer.sequences,

  }),
  dispatch => ({

  }))(Project);

export default ProjectContainer;

Компонент представление одного проекта
export  class Project extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isDescriptionProject: false,
            isShowSequence: false
        };
        this.showDescriptionProject = this.showDescriptionProject.bind(this);
        this.showSequence = this.showSequence.bind(this);

    }


    showDescriptionProject() {
        if (this.state.isDescriptionProject === false) {
            this.setState({isDescriptionProject: true});
        } else {
            this.setState({isDescriptionProject: false});
        }
    }

    showSequence() {
        if (this.state.isShowSequence === false) {
            this.setState({isShowSequence: true});
        } else {
            this.setState({isShowSequence: false});
        }
    }

    render() {

        return (
            <div>
                <div className="project">

                    <div onDoubleClick={this.showDescriptionProject}>
                        {this.props.name} {this.props.type}
                    </div>

                    <span
                        className={this.state.isShowSequence ? "fa fa-minus":"fa fa-plus"}
                        onClick={this.showSequence}

                    >
                    </span>


                </div>


                <div className={ this.state.isShowSequence ? "container_sequence":""}>
                    { this.state.isShowSequence ? <SequencesContainer projectId={this.props.projectId} />:""}
                </div>

                <div className={this.state.isDescriptionProject ? "container_description":""}>
                    {this.state.isDescriptionProject ? <DescriptionElement head={this.props.name} />: null}
                </div>

            </div>

        );
    }

}

The problem, as I understand it, is in the ProjectContainer. Is it possible to loop through an array and create a list of individual containers?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question