score:1

Accepted answer

since you don't have much functionality taking place in either of these components, then i would suggest mapping in-line rather than utilizing an additional function (renderaside) for this process. you don't either have anything that requires a stateful/class component, so i would suggest changing this to a functional component to avoid needing a constructor. if you need state later, just use hooks.

another thing to note is that with es6, you should be using arrow functions.

renderaside(){ /// change this function to an arrow function
renderaside = () => { /// should be
import react from 'react';
import { connect } from 'react-redux';

const aside = (props) => {
  let { cart } = props;
  console.log(cart);

  return (
    <div>
      {cart.map((item, key) => {
        return (
          <div classname="aside-item" key={key}>
            <div classname="aside-item__name">{item.product.name}</div>
          </div>
        );
      })}
    </div>
  );
};

const mapstatetoprops = (state) => {
  return {
    cart: state.asidereducer.cart,
  };
};

export default connect(mapstatetoprops)(aside);

in the future.... if you're trying to dynamically update the dom with new elements then you'd need to invoke your mapping function. you're calling it when the page is first rendered. the dom isn't going to update just because something new is added. you have to re-render that data. in a stateful component you would update the state variable then invoke your mapping function each time that state has been successfully updated.

score:0

you should bind your renderaside when using function declaration

  1. first way - bind your function before using

    class aside extends component {
       constructor(props) {
         super(props);
    
         // this binding is necessary to make `this` work in the callback
         this.renderaside = this.renderaside.bind(this);
       }
    
       // ...
     }
    
  2. two way - using arrow function

     renderaside = () => { // change this line
         const asideitems = this.props.cart
         console.log(asideitems) // not working never
         return asideitems.map((item, key) =>{
           return(
             <div classname="aside-item" key={key}>
               <div classname="aside-item__name">{item.product.name}</div>
             </div>
           )
         })
       }
    

score:0

i'm not correct return my new state

incorrect

return {
        ...state, cart: cart
      }

correct code

 return {
        ...state,
        cart: [...state.cart, action.payload]
      }

Related Query

More Query from same tag