React-Redux TypeError: Cannot read property 'map' of undefined

Question

When I press the button increment or decrement, I get this message. I think all the steps are okay but I can not understand why, when I press the button (+ or -), the store/state is set to undefined;

src/App.js

 import React, { Component } from "react";
    import Counter from "./components/counter";
    import { connect } from "react-redux";

    class App extends Component {
      render() {
        return (
          <div>
            {this.props.data.map(counter => (
              <Counter key={counter.id} id={counter.id} value={counter.value} />
            ))}
          </div>
        );
      }
    }

    const mapStateToProps = state => {
      return {
        data: state.data
      };
    };
    export default connect(mapStateToProps)(App);

src/components/counter.js

import React, { Component } from "react";
import { connect } from "react-redux";

class Counter extends Component {
  render() {
    return (
      <div>
        <h1>{this.props.value}</h1>
        <button onClick={() => this.props.onIcrement(this.props.id)}>
          + UP
        </button>
        <button onClick={() => this.props.onDecrement(this.props.id)}>
          - DOWN
        </button>
      </div>
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    onIcrement: id => dispatch({ type: "INCREMENT", key: id }),
    onDecrement: id => dispatch({ type: "DECREMENT", key: id })
  };
};

export default connect(
  null,
  mapDispatchToProps
)(Counter);

src/store/reducer.js

const initialState = {
  data: [{ id: 1, value: 4 }, { id: 2, value: 0 }]
};
const reducer = (state = initialState, action) => {
  const newState = { ...state };
  switch (action.type) {
    case "INCREMENT":
      return newState.data.map(el => {
        if (action.key === el.id) {
          return el.value++;
        }
        return el.value;
      });
    case "DECREMENT":
      return newState.data.map(el => {
        if (action.key === el.id) {
          return el.value--;
        }
        return el.value;
      });
    default:
      return newState;
  }
};
export default reducer;

src/index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { createStore } from "redux";
import { Provider } from "react-redux";
import reducer from "./store/reducer";

const store = createStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);


serviceWorker.unregister();

................................................................................

johnny peter · Accepted Answer · 2019-06-14 13:23:55Z

2

In your reducer, you are returning an array instead of an object with a key data which is an array.

The following code should work.

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {
        data: state.data.map(el => { // <- return object with data instead of newState.data.map
          if (action.key === el.id) {
            return { ...el, value: el.value + 1};
          }
          return el;
        })
      };
    case "DECREMENT":
      return {
        data: state.data.map(el => { // <- same here too 
          if (action.key === el.id) {
            return { ...el, value: el.value - 1 };
          }
          return el;
        })
      };
    default:
      return state;
  }
};

edited Jun 14, 2019 at 13:23

answered Jun 14, 2019 at 12:36

johnny peter

4,8701 gold badge28 silver badges39 bronze badges

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

1 Comment

xristlxcv Over a year ago

I tried but when i pressed the (+/-) i got this [1] and after when i pressed again the button i got this [2]... [1]: i.sstatic.net/E8bFw.png [2]: i.sstatic.net/gyYwA.png

Collectives™ on Stack Overflow

React-Redux TypeError: Cannot read property 'map' of undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related