I have a simple Cart component and I want to show either a "Your cart is empty" message when there are no items in it.
import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as CartActions from '../actions/cart'
import Shelf from './Shelf'
import EmptyCart from './EmptyCart'
/*
This is a container component
*/
class Cart extends Component {
constructor(props) {
super(props)
this.state = {
itemQuantity: props.cart.length
}
}
render() {
const CartItems = this.props.cart.map(
(item, idx) =><li key={idx}>{item.name} - ${item.price}</li>
)
const isCartEmpty = () => this.state.itemQuantity === 0
console.log("is cart empty? ", isCartEmpty(), "cart item quantity ", this.state.itemQuantity)
return(
<div className="Cart">
<Shelf addItem={this.props.action.addToCart} />
<h2>Cart Items</h2>
<ol>
{ isCartEmpty() ? <EmptyCart/> : {CartItems} }
</ol>
</div>
)
}
}
function mapStateToProps(state, prop) {
return {
cart: state.cart
}
}
function mapDispatchToProps(dispatch) {
return {
action: bindActionCreators(CartActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Cart)
My Shelf component looks like this:
import React, { Component } from 'react';
class Shelf extends Component {
constructor(props) {
super(props)
this.addItemToCart = this.addItemToCart.bind(this)
this.state = {
shelfItems: [
{ "name": 'shampoo', "price": 23 },
{ "name": 'chocolate', "price": 15 },
{ "name": 'yogurt', "price": 10 }
]
}
}
addItemToCart(item){
this.props.addItem(item)
}
render() {
const shelfItems = this.state.shelfItems.map((item, idx) => {
return <li key={idx}><button onClick={()=>this.addItemToCart(item)}>[+]</button>{item.name} - ${item.price}</li>
})
return(
<div>
<h2>Shelf</h2>
<ul>
{shelfItems}
</ul>
</div>
)
}
}
export default Shelf
Cart Reducer:
export default(state = [], payload) => {
switch (payload.type) {
case 'add':
return [...state, payload.item]
default:
return state
}
}
addToCart action:
export const addToCart = (item) => {
return {
type: 'add',
item
}
}
The empty message shows up but the list does not update when I add items. What am I doing wrong? The code works just fine if I remove the conditionals and just render CartItems
It's because you set only initial state. When you add item you don't set a new state. If you use redux there is no local state needed.
Try this:
class Cart extends Component {
constructor(props) {
super(props)
this.state = {}
}
render() {
const CartItems = this.props.cart.map(
(item, idx) =><li key={idx}>{item.name} - ${item.price}</li>
)
const isCartEmpty = CartItems.length === 0
return(
<div className="Cart">
<Shelf addItem={this.props.action.addToCart} />
<h2>Cart Items</h2>
<ol>
{isCartEmpty ? <li>Your Cart is Empty</li> : CartItems}
</ol>
</div>
)
}
}
Related
Problem
So as the title said i've this issue in a todoapp. i checked if i had some typo like react instead of React and it seems to be alright.
Before post something i checked:
First post stackoverflow
Second post stackoverflow
but i cannot find a solution
Code
App.js
import React, {Component} from 'react';
import Form from './Components/Form';
import Footer from './Components/Footer';
import Header from './Components/Header';
class App extends React{
constructor(props) {
this.state = {
todoValue: "",
filterType: "All",
todos: [],
}
}
handleChange = (event) => {
this.setState({
todoValue: event.target.value,
})
}
handleClick = (event) => {
event.preventDefault();
if (this.state.todoValue !== "") {
const todo = {
id: Date.now(),
text: this.state.todoValue,
done: false,
}
this.setState({
todoValue: "",
todos: [todo, ...this.state.todos],
})
}
}
handleToggle = (id) => {
this.setState((prevState) => {
return {
todos: prevState.todos.map((item, i) => {
if (item.id === id) {
return {
...item,
done: !prevState.todos[i].done,
}
}
return item;
})
}
})
}
handleDelete = (id) => {
this.setState({
todos: this.state.todos.filter(item => item.id !== id)
})
}
deleteCompleted = () => {
this.setState({
todos: this.state.todos.filter(item => !item.done)
})
}
getVisibleTodos = () => {
const filterType = this.state.filterType;
let filterState = null;
switch (filterType) {
case "Completed":
return filterState = this.state.todos.filter(item => item.done);
case "Active":
return filterState = this.state.todos.filter(item => !item.done);
case "Originals":
return filterState = this.state.todos.filter(item => !item.done);
case "New":
return filterState = this.state.todos.filter(item => !item.done);
default:
return filterState = this.state.todos;
}
}
setActiveFilter = (text) => {
this.setState({
filterType: text,
})
}
render() {
return (
<div className="container">
<Header countTodo={this.state.todos.length}/>
<Form handleDelete={this.handleDelete}
handleToggle={this.handleToggle}
handleClick={this.handleClick}
handleChange={this.handleChange}
todoValue={this.state.todoValue}
todos={this.getVisibleTodos()}/>
<Footer setActiveFilter={this.setActiveFilter}
deleteCompleted={this.deleteCompleted}
filter={this.state.filterType}/>
</div>
)
}
}
export default App;
Header.js
import React from 'react';
class Header extends React.Component {
render() {
return (
<header className="header">
<h3>All To-Do {this.props.countTodo}</h3>
</header>
)
}
}
export default Header;
Form.js
import React, {Component} from'react';
import Todo from './Todo';
class Form extends React {
render() {
return (
<form className="form">
<input type="text"
className="form__input"
placeholder="Items"
onChange={this.props.handleChange}
value={this.props.todoValue}
/>
<button
className="form__button"
type="submit"
onClick={this.props.handleClick}>╋</button>
<Todo
todos={this.props.todos}
handleToggle={this.props.handleToggle}
handleDelete={this.props.handleDelete}
/>
</form>
)
}
}
export default Form;
and the last modul is Todo.js
import React, {Component} from 'react';
class Todo extends React{
render() {
return (
<ul className="todos-list">
{
this.props.todos.map((item) => {
return (
<li className="todo-item"
key={item.id} onClick={() => this.props.handleToggle(item.id)}>
<span
className={item.done ? "todo-item__name disabled" : "todo-item__name"}>
{item.text}
</span>
<span
className="todo-item__delete-button"
onClick={() => this.props.handleDelete(item.id)}>
×
</span>
</li>
)
})
}
</ul>
)
}
}
export default Todo;
You class should extend from Component that you're importing from react library.
It should be either
class App extends Component{}
or if you didn't import Component then
class App extends React.Component{}
You haven't extended your App component correctly
class App extends React{ // error here
constructor(props) {
this.state = {
todoValue: "",
filterType: "All",
todos: [],
}
}
Extend it from React.Component
class App extends React.Component {
constructor(props) {
super(props); // use super here
this.state = {
todoValue: "",
filterType: "All",
todos: [],
}
}
I'm managing Todo lists in my app. The main view is a page with all the lists displayed as cards. If you click on one of them, you can modify, update, delete stuff through a modal that appears.
I have a TodoLists reducer that store all the TodoLists. I don't know how to handle the modal. Should I use redux or just local state?
import _ from "lodash";
import React from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { listsActions } from "../duck";
import NewList from "./NewList";
import Card from "./Card";
import Modal from "./Modal";
class Lists extends React.Component {
constructor(props) {
super(props);
this.state = {
modal: false,
list: {}
};
this.hideModal = this.hideModal.bind(this);
this.renderModal = this.renderModal.bind(this);
}
componentDidMount() {
const { fetchByUserId, user } = this.props;
if (user !== undefined) {
fetchByUserId(user.id);
}
}
hideModal() {
this.setState({
modal: false
});
}
renderModal() {
this.setState({
modal: true
});
}
render() {
const { items } = this.props;
const { modal, list } = this.state;
return (
<div>
<NewProject />
<div className="columns">
{_.map(items, (l) => (
<div
key={l.id}
className="column"
>
<Card
list={l}
onClick={() => this.renderModal(l)}
/>
</div>
))}
</div>
<Modal
className={modal ? "is-active" : ""}
list={list}
onClose={this.hideModal}
/>
</div>
);
}
}
const mapStateToProps = (state) => {
const { user } = state.authentication;
const { items, loading, error } = state.lists;
return {
user,
items,
loading,
error
};
};
export default connect(
mapStateToProps,
{ fetchByUserId: listsActions.fetchByUserId }
)(Projects);
How do I update the horse listing after the add horse action is fully done?
I think that the reloadHorseList in CreateHorse is running before createHorse actions is completely done so sometimes I see new horse in list and sometimes not. A full reload shows an update always.
Horses Component
...
import { getHorses } from '../../actions';
import ListHorses from './ListHorses';
import CreateHorse from './forms/createHorseForm';
class Horses extends React.Component {
constructor(props) {
super(props);
this.state = {
...
};
this.reloadHorseList = this.reloadHorseList.bind(this);
}
componentDidMount() {
this.reloadHorseList();
}
reloadHorseList() {
this.props.getHorses(this.props.current_user.selected_stable);
}
render() {
return (
<div className="content page-content-wrapper1">
<CreateHorse
current_user={this.props.current_user}
reloadHorseList={this.reloadHorseList}
/>
<ListHorses
current_user={this.props.current_user}
horses={this.props.horses}
/>
</div>
);
}
}
function mapStateToProps(state) {
return {
horses: state.horses
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(
{
getHorses: getHorses
},
dispatch
);
}
export default connect(mapStateToProps, mapDispatchToProps)(Horses);
Create Horse Form
...
import { Field, reduxForm, getFormValues } from 'redux-form';
import {
createHorse,
getHorseSelect,
updateHorseCount
} from '../../../actions';
import { connect } from 'react-redux';
const renderField = (...
);
class CreateHorse extends Component {
constructor(props) {
super(props);
this.state = {
...
};
this.setMessage = this.setMessage.bind(this);
}
onSubmit(props) {
//let p = this.props.reloadHorseList;
try {
this.props.createHorse(props, this.setMessage);
//running before I have finished creating my horse
this.props.reloadHorseList();
} catch (err) {
...
}
}
render() {
const { handleSubmit } = this.props;
return (
<div>
...
{this.state.displayHorseCreateForm && (
<div>
<h4 className="header-content">Add Horse</h4>
<p> * required field</p>
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
// fields here
<button type="submit" className="btn btn-primary">
Submit
</button>
</form>
</div>
)}
</div>
);
}
}
function validate(values) {
...
}
function mapStateToProps(state) {
---
}
export default connect(mapStateToProps, {
createHorse,
getHorseSelect,
updateHorseCount
})(
reduxForm({
form: 'HorseCreatetForm',
initialValues: {
...
},
validate
})(CreateHorse)
);
//create horse action
export const createHorse = (props, setMessage) => async dispatch => {
try {
const request = await axios.post(`/api/horse/create`, props);
return {
type: CREATED_HORSE,
payload: request.data
};
} catch (err) {
...
}
};
ListHorses
...
import { deleteHorse } from '../../actions';
class HorsesList extends React.Component {
render() {
let horses = this.props.horses;
let horseCount = this.props.horse_count;
return (
<div className="content">
horse count: {horseCount}
<ul className="list-inline box-body">
{horseCount > 0 &&
horses.map((horse, key) => (
<li key={key}>
...//listing here
</li>
))}
</ul>
</div>
);
}
}
function mapStateToProps(state) {
return {
horse_count: state.horse_count
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(
{
...
},
dispatch
);
}
export default connect(mapStateToProps, mapDispatchToProps)(HorsesList);
The solution that worked for me is to send a callback to the CreateHorse component to send to the createHorse action which runs Horse components action to getHorses.
class Horses extends React.Component {
constructor(props) {
super(props);
this.state = {
horses: this.props.horses,
};
this.reloadHorses = this.reloadHorses.bind(this);
}
componentDidMount(prevProps) {
this.props.getHorses(this.props.current_user.selected_stable);
}
reloadHorses = () => {
this.props.getHorses(this.props.current_user.selected_stable);
};
...
<CreateHorse
current_user={this.props.current_user}
reloadHorses={this.reloadHorses}
/>
<ListHorses
horses={this.props.horses}
/>
...
function mapStateToProps(state) {
return {
horses: state.horses
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(
{
getHorses: getHorses
},
dispatch
);
}
export default connect(mapStateToProps, mapDispatchToProps)(Horses);
then in CreateHorse component
onSubmit(props) {
this.props.createHorse(props, this.setMessage, this.props.reloadHorses);
}
}
Then in the createHorse action
export const createHorse = (
props,
setMessage,
reloadHorses
) => async dispatch => {
try {
const request = await axios.post(`/api/horse/create`, props);
reloadHorses();
return {
type: CREATED_HORSE,
payload: request.data
};
} catch (err) {
...
}
};
You should be posting real code at this point. To trigger a component re render you need to be changing it's state. I would recommend setting your props from redux into local state and render your list from that. You also will need to be using componentWillRecieveProps();
componentDidMount() {
this.reloadHorseList();
this.setState=({list: this.props.horseList});
}
componentWillRecieveProps(nextProps){
this.setState=({list: nextProps.horseList})
}
You are correct in your assumption that the component finishes loading first. So you need to utilize the componentWillRecieveProps lifecycle hook .
Alternatively, if you're using mapStateToProps() with redux your component should be rerendering when anything within mapStateToProps() changes.
I have a container component that connects to the state which I made with immutable.js. When I update the state, my redux inspector tells me that the state is updated, but my component doesn't get the new updates and doesn't re-render.
My container component:
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { setCategoryActive } from '../actions'
import Category from '../components/Category'
class MenuList extends Component {
constructor(props) {
super(props)
this.categories = this.props.categories
this.subreddits = this.props.subreddits
this.allCategories = this.categories.get("allCategories")
this.byName = this.categories.get("byName")
}
printSubreddits(category) {
const subreddits = this.byName.get(category)
const subredditsByName = subreddits.get("subredditsByName")
const list = subredditsByName.map((subreddit, i) => {
return <p className="swag" key={i}>{subreddit}</p>
})
return list
}
isCategoryActive(category) {
const cat = this.byName.get(category)
return cat.get("active")
}
printCategory(category, i) {
console.log(this.isCategoryActive(category))
return (
<div className="category-container" key={i}>
<Category name={category}
active={this.isCategoryActive(category)}
setActive={this.props.setCategoryActive.bind(this, category)} />
{this.isCategoryActive(category) ? this.printSubreddits(category) : null}
</div>
)
}
render() {
return (
<div>
{this.allCategories.map((category, i) => {
const x = this.printCategory(category, i)
return x
}, this)}
</div>
)
}
}
const mapStateToProps = (state) => ({
categories: state.subredditSelector.get('categories'),
subreddits: state.subredditSelector.get('subreddits')
})
export default connect(mapStateToProps, {
setCategoryActive
})(MenuList);
My Category component
class Category extends Component {
printToggle(active) {
if (active) {
return <span> [-]</span>
} else {
return <span> [+]</span>
}
}
componentWillReceiveProps(nextProps) {
this.printToggle(nextProps.active)
}
render() {
const { setActive, active, name } = this.props
return (
<div className="category-container">
<a onClick={setActive}
href="#"
className="category-title">
{name}
{this.printToggle(active)}
</a>
</div>
)
}
}
export default Category
And my reducer
import { fromJS } from 'immutable'
import {
SET_SUBREDDIT_ACTIVE,
SET_CATEGORY_ACTIVE
} from '../actions'
import List from '../data/nsfw_subreddits.js'
const initState = fromJS(List)
const subredditSelector = (state = initState, action) => {
switch (action.type) {
case SET_SUBREDDIT_ACTIVE:
return state
case SET_CATEGORY_ACTIVE:
return state.updateIn(['categories', 'byName', action.payload.name],
x => x.set('active', !x.get('active')))
default:
return state
}
}
export default subredditSelector
A piece of my state that I have coded as a JSON object
const list = {
categories: {
byName: {
"example": {
name: "example",
id: 1,
active: true,
subredditsByName: ["example", "example"]
},
"example": {
name: "example",
id: 2,
active: true,
subredditsByName: ["example"]
},
"example": {
name: "example",
id: 3,
active: true,
subredditsByName: ["example", "example", "example"]
}
},
allCategories: ["example", "example", "example"]
},
subreddits: {
My guess is that my reducer is mutating the state? Though I am not sure how, since I am using the immutable js functions?
So I fixed this issue by changing the constructor from a constructor to a regular function and called it at the top of my render method!
You should still keep your constructor, but only have in it what needs to be done when the object is first created:
constructor(props) {
super(props)
}
And yes, having
cleanPropData(){
this.categories = this.props.categories
this.subreddits = this.props.subreddits
this.allCategories = this.categories.get("allCategories")
this.byName = this.categories.get("byName")
}
is fine. I haven't heard of someone invoking it at the top of a render function. Nice to know that works.
I have to render few tabs. ONclick of it, it should get highlighted. I have tabList object coming from reducer (hard-coded value). onclicking of a tab a action is generated which set the "state" with clicked tab object(I call it "activeTab").
while rendering the tabList (all the tabs) I am checking if "rendered_tabid == active_tabid" then add a class "active" (it is conditional basis)
active-tab-reducer.js
export const tabReducer = () => {
return [
{
id: 1,
name:"Dental Page",
url: '#dentalPage'
},
{
id: 2,
name:"Vision Page",
url: '#visionPage'
},
{
id: 3,
name:"Other page Tab",
url: '#OtherPage'
}
]
}
const activeTabReducer = (state = {}, action) => {
switch(action.type) {
case "TAB_SELECTED": return action.payload;
break;
}
return state;
}
export default activeTabReducer;
(combined-reducer) index.js
import {combineReducers} from 'redux';
import activeTabReducer, {tabReducer} from './active-tab-reducer';
const allReducers = combineReducers({
tabList: tabReducer,
activeTab: activeTabReducer
});
export default allReducers;
(action) index.js
export const selectTab = (tab) => {
console.log('action invoked', tab);
return {
type: "TAB_SELECTED",
payload: tab
}
}
tablist.js
import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {selectTab} from '../actions/index';
import TabsListItem from './tabsListItem';
class TabList extends React.Component {
constructor(props){
super(props);
}
createTabItems(){
return this.props.tabList.map((item, i) => {
return (
<TabsListItem key={i} tabList={item} />
)
});
}
render() {
return (
<div id="layout-header" className="layout-header">
<div id="header" className="header">
<ul className="tabs tabs--horizontal">
{this.createTabItems()}
</ul>
</div>
</div>
);
}
};
function mapStateToProps(state) {
return {
tabList: state.tabList,
activeTab: state.activeTab
}
}
function matchDispatchToProps(dispatch){
return bindActionCreators({selectTab: selectTab}, dispatch);
}
export default connect(mapStateToProps, matchDispatchToProps)(TabList);
tabListItem.js
import React from 'react';
class TabListItem extends React.Component {
constructor(props){
super(props);
console.log(this.props.tabList)
}
render() {
return (
<li onClick={() => this.props.selectTab(this.props.tabList)}
className={"tab "+((this.props.activeTab.id==item.id)?'active':'')+""+( (this.props.activeTab.id==undefined) && (item.id == 1)?'active':'' )
role="presentation" className={"tab " }>
<a href="#">
<div className="tab__label">
<div className="tab__label__value">{this.props.tabList.name}</div>
</div>
</a>
</li>
);
}
};
export default TabListItem;
when I click any tab (from tabListItem), a action TAB_SELECTED action should dispatch, which set the state with "activeTab" object.
How to generate action from child?
You should pass a function to the child component via props.
As the action has a parameter to select the correct tab, you can use a function returning a function:
createTabItems() {
return this.props.tabList.map((item, i) => {
return (
<TabsListItem key={i} tabList={item} onSelect={() => this.onSelect(i).bind(this)} />
);
});
}
In this way your child component calls your method onSelect passing the correct parameter.
In your onSelect method on the parent (container) component you will then dispatch your action:
onSelect(i) {
this.props.selectTab(i);
}