CODEWITHSUNDEEP
reactjs
devd_102
devd_102

Reputation: 23

List not rendering to parent component

I'm building a Todo app using react+redux. When I add new todo in my list, state of store and state of TodoList component are updated successfully but My todoList code not working properly. React component is not rendering list.

Structure of state is below.

State = [
   {
     id,
     text,
     completed
   },...
]

My code is below.

Todo.js

import React, { Component } from 'react';
import Form from './Form';
import TodoList from './TodoList';
import Filter from './Filter';

class ToDo extends Component {
    render() {
        return (
            <div>
                <h2>Todo App</h2>
                <Form />
                <TodoList />
                <Filter />
            </div>
        );
    }
}

export default ToDo;

TodoList.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { toggleToDo } from '../actions';

class TodoList extends Component {
    constructor (props){
        super(props);
        this.state = {
            list: []
        };
    }

    render() {
        console.log(this);
        const todolist = this.state.list;
        return (
            <ul>
            {
                todolist.map(function(listValue) {
                    return <li>{listValue.text}</li>;
                })
            }
            </ul>
        );
    }
}

const mapStateToProps = (state) => {
    console.log('TodoList state',state);
    return {
        todos: state
    }
}

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({toggleToDo},dispatch);
}

export default connect(mapStateToProps,mapDispatchToProps)(TodoList);

Upvotes: 0

Views: 45

Answers (1)

Efe
Efe

Reputation: 5796

You are mapping your state to props with mapStateToProps so you should get this state value from your props.

const { todos } = this.props; and iterate on todos instead of todolist.

Upvotes: 1

Related Questions