score:1
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
first way -
bind
your function before usingclass aside extends component { constructor(props) { super(props); // this binding is necessary to make `this` work in the callback this.renderaside = this.renderaside.bind(this); } // ... }
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]
}
Source: stackoverflow.com
Related Query
- How update render when redux state updated?
- React Navigation: How to update navigation title for parent, when value comes from redux and gets updated in child?
- how to auto refresh component when redux state get updated
- React + Redux: How to update state when store is updated
- How to pass state to jsx, render it and update when state changes?
- How to keep the updated state array of object values when update the same state again in React JS useState?
- Not getting updated state from redux store when the state is update
- How to update local state when redux state is updated(react-redux)
- How to update component state on redux state change?
- How to reset state of Redux Store when using configureStore from @reduxjs/toolkit?
- How to avoid setState() inside render() when state depends on render
- How to update (re-render) the child components in React when the parent's state change?
- how and when to call a react component methods after state change from redux
- How to stop re render child component when any state changed in react js?
- Redux not updating components when deep Immutable state properties are updated
- How to update specific form field in formik when value changes in redux store?
- How to update state with setState before render
- How to properly update a react native swiper component when state changes?
- How to indicate "loading" state for an async action during first render using redux
- How to test redux state update with react testing library and jest
- How to make MobX update the component when observable is not used in the render method?
- How to update the image when state is updated?
- How to instantly update state when any changes into the localStorage in React.js
- How can I remove event Listener so it would not try to update state when component is unmounted?
- React - How do i force child components to re render when parent state component changes?
- How to avoid rerender all child components which in loop when parent component state update
- Style does not update when state is updated
- p5.js and React: how to update a sketch inside a component when one of the component's props is updated
- React Native: Redux - How to properly update TextInput via event and have redux state update?
- How to update my useEffect hook when State change happen in a different .js file's component in ReactJS?
More Query from same tag
- The number is not clearing up after submission even if other fields do clear up
- 'This' undefined in parsing the xml API using react
- Weather App React taking three clicks to update state and pass props
- Antd table how to fixed first row
- set multiple Search Params in the same render cycle
- React JS Nested elements both use same onClick event and child event is not working
- handling multiple protected routes
- React - Set TextArea value as HTML
- using react tooltip with styled components
- React state emptied out between calls in callback function
- How I can loop through the similar objects in state and push them into object?
- Material UI React paper component in nested grid display issues
- Redirect does not seem to be reliable
- Can I dispatch an action in reducer?
- set maximum character input size of react CreatableSelect
- Cleanup .throttle()'d callbacks in componentWillUnmount
- Redux Router - "Dispatch is not defined"
- Positioning Materialize CSS switches in a tabular fashion
- React - React.createElement: type should not be null, undefined, boolean
- Redux saga event channel is terminated after another saga is executed
- SyntaxError: 'super' keyword unexpected here
- How to iterate through nested document passed as a json body, and update every document in a collection
- Typescript: Types of property 'data' are incompatible
- React-bootstrap-table2 doesn't show data from Firebase
- Redux mapDispatchToProps access action within array.map
- Prettier doesn't format based on my eslint config
- React-redux: mapStateToProps() is not triggered
- Express: serve Webpack bundle on subroutes
- React: import csv file and parse
- Increment and decrement button function in next.js typescript