CODEWITHSUNDEEP
reactjsredux
Gng
Gng

Reputation: 3

OnClick function not rendering a component in react-redux

I have been working to solve this problem for hours now. In my App component to add a new list on clicking a button i am calling a redux action as a prop which will push a new list into the list array. I don't see any errors with my code and this piece of code has worked for another component but not in the main App component. Is there anything i am doing wrong?

import React, { Component } from 'react';
import List from './components/list.react.js';
import './App.css';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux'
import {addList} from './ListAction.js';
import PropTypes from 'prop-types'
import AddIcon from './AddIcon.png';

class App extends Component {
   constructor(props){
   super(props);
  }

 getLists=()=>{
   return(
          this.props.lists.map((list)=>{
          return(               
                <List key={list.id} id={list.id} ></List>
            );         
          })
    )}

 render() {
  debugger;
  let ListId=1;
    return (
      <div className="Content">
      <div className="Header-Wrapper"><h1>React Redux App</h1></div>
      <div className="Boxes">
      <List id={ListId} />
      <div>{this.getLists}</div>
      <div className="wrapper">     
      <button className = "NewCard" onClick={this.props.addList}>
      <img src={AddIcon} alt="Add-Icon"></img>
       Add a new List
      </button>
      </div>
       </div>
      </div>
    );
  }
}

App.propTypes={
    lists:PropTypes.array.isRequired

   }

function mapStateToProps(state){

 return({lists:state.Lists}) 

}
function mapDispatchToProps(dispatch){

  return bindActionCreators({addList:addList},dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(App);

Upvotes: 0

Views: 202

Answers (1)

Alireza
Alireza

Reputation: 2449

Edited:

use {this.getLists()} instead of {this.getList}.

(since Amir Aleahmad comment was correct answer i edited the my first)

Upvotes: 1

Related Questions