We Keep Coding

My `addToCart` function is not showing any result

This is the code where I have my addtocart function,
import React from 'react'
import './Body.css'
import { useState } from 'react'
// import './Cart.js'
export default function Pricetag(props) {
const [count, setCartCount] = useState(0)
return (
<div>
<div className="cart">
<i class="fa-solid fa-cart-shopping"></i>
<div id="number">=</div>
</div>
<div className="card1">
<div className="image">
<img src={props.images} alt="" className='card-image' />
</div>
<div className="content">
<div className="name">
{props.name}
</div>
</div>
<div className="button">
<button className='btn no1' id='cartbutton' onClick={() => setCartCount( count +1)} >
{/* <a id="cart" href="https://wa.me/<919650988301>" target='_blank' rel="noreferrer" className='no1'>Add to cart</a></button> */}
Add to cart </button>
</div>
</div>
<script ></script>
</div>
)
}
When I do,
number.innerHTML+=`${items}`
instead of
number.innerHTML=`${items}`
then the numbers are concatenated like strings.
Otherwise, nothing is happening, what is wrong here?
Can you suggest me some edits in the same code.

As you are using React framework you should use React hooks
Here is an example:
import React, { useState } from 'react'
import './Body.css'
// import './Cart.js'
export default function Pricetag(props) {
const [cartCount, setCartCount] = useState(0)
return (
<div>
<div className="cart">
<i class="fa-solid fa-cart-shopping"></i>
<div id="number">={cartCount}</div>
</div>
<div className="card1">
<div className="image">
<img src={props.images} alt="" className='card-image' />
</div>
<div className="content">
<div className="name">
{props.name}
</div>
</div>
<div className="button">
<button className='btn no1' id='cartbutton' onClick={() => setCartCount(cartCount +1))} >
{/* <a id="cart" href="https://wa.me/<919650988301>" target='_blank' rel="noreferrer" className='no1'>Add to cart</a></button> */}
Add to cart </button>
</div>
</div>
</div>
)
}
Working on codesandbox

Document query selector returns undefined in react

I am trying to build a toggle sidebar. when I click on the button the class list of .m-toggle should be updated. But react gives me an error
"TypeError: Cannot read property 'classList' of null"
Here is my code:
import React, { useState, useEffect } from 'react'
// import Sidebar from '../Components/Sidebar'
import AppleIcon from '#material-ui/icons/Apple'
import DashboardIcon from '#material-ui/icons/Dashboard'
import PeopleIcon from '#material-ui/icons/People'
import NotificationsIcon from '#material-ui/icons/Notifications'
import SettingsIcon from '#material-ui/icons/Settings'
import HelpIcon from '#material-ui/icons/Help'
import img from '../Assets/img/keval.jpg'
function toggleMenu() {
let toggle = document.querySelector('.m-toggle')
toggle.classList.toggle('m-active')
}
const Main = () => {
return (
<>
<div className="m-body">
<div className="m-container">
{/* -------Sidebar Start------- */}
<div className="m-navigation">
<ul style={{ padding: '0' }}>
<li>
<a href="#">
<span className="m-icon">
<AppleIcon className="muicon" />
</span>
<span className="m-title">
<h2>Brand Name</h2>
</span>
</a>
<hr style={{ color: 'white' }} />
</li>
<li>
<a href="#">
<span className="m-icon">
<DashboardIcon className="muicon" />
</span>
<span className="m-title">Dashboard</span>
</a>
</li>
<li>
<a href="#">
<span className="m-icon">
<PeopleIcon className="muicon" />
</span>
<span className="m-title">Employees</span>
</a>
</li>
<li>
<a href="#">
<span className="m-icon">
<NotificationsIcon className="muicon" />
</span>
<span className="m-title">Notification</span>
</a>
</li>
<li>
<a href="#">
<span className="m-icon">
<HelpIcon className="muicon" />
</span>
<span className="m-title">Help</span>
</a>
</li>
<li>
<a href="#">
<span className="m-icon">
<SettingsIcon className="muicon" />
</span>
<span className="m-title">Setting</span>
</a>
</li>
</ul>
</div>
{/* --------Side BAr End--------- */}
<div className="m-main">
<div className="m-topbar">
<div className="m-toggle" onClick={toggleMenu()}>
f
</div>
<div className="m-search">
<label>
<input type="text" placeholder="Search here" />
</label>
</div>
<div className="user">
<img src={img} alt="no img" />
</div>
</div>
</div>
</div>
</div>
</>
)
}
export default Main
You can see the code where onclick class list should be updated but it is not updating.

One problem I see is that you are not passing a function reference in onClick, but doing a function call instead:
<div className="m-toggle" onClick={toggleMenu()}>
Either remove the parentheses after toggleMenu:
<div className="m-toggle" onClick={toggleMenu}>
or pass it as an inline arrow function:
<div className="m-toggle" onClick={() => toggleMenu()}>

Several problems:
React onClick expects a function but you are invoking toggleMenu instead. It should be onClick={toggleMenu} or onClick={()=>toggleMenu()}
You should be managing the className using state instead of using document.querySelector() and modifying the element yourself.

You are calling the toggleMenu() method during component render which you shouldn't do.
So when your component tries to render, it calls toggleMenu method and returns null for m-toggle query selector. you can either bind function reference or use arrow function.
<div className="m-toggle" onClick={toggleMenu}>
OR
<div className="m-toggle" onClick={() => toggleMenu()}>

Having problem on mapping JSON data in react redux

we are building an e-commerce website using React and Redux as a front-end. And we need to display categories data on the category page. We successfully get JSON data in console, but we have a problem to display in the category component page.
Please help to solve this problem
reducer/categories.js:
import { RECEIVE_CATEGORIES } from "../constants/ActionTypes";
const initialState = {
categories: []
};
const categoryReducer = (state = initialState, action) => {
switch (action.type) {
case RECEIVE_CATEGORIES:
return {
...state,
categories: action.categories
};
default:
return state;
}
};
export default categoryReducer;
action/index.js:
import shop from '../api/shop'
import * as types from '../constants/ActionTypes'
import store from "../store";
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.min.css';
export const fetchProductsBegin = () => ({
type: types.FETCH_PRODUCTS_BEGIN
});
export const fetchCategoryBegin = () => ({
type: types.FETCH_CATEGORIES_BEGIN
});
export const receiveProducts = products => ({
type: types.RECEIVE_PRODUCTS,
products
})
export const receiveCategories = categories => ({
type: types.RECEIVE_CATEGORIES,
categories
})
export const getAllProducts = () => dispatch => {
dispatch(fetchProductsBegin());
return shop.getProducts(
products => {
products.then((data)=> { dispatch(receiveProducts(data));})})
}
export const getAllCategories = () => dispatch => {
dispatch(fetchCategoryBegin());
return shop.getCategories(
products => {
products.then((data)=> {
console.log("executed");
dispatch(receiveCategories(data));})})
}
export const fetchSingleProduct = productId => ({
type: types.FETCH_SINGLE_PRODUCT,
productId
})
//it seems that I should probably use this as the basis for "Cart"
export const addToCart = (product,qty) => (dispatch) => {
toast.success("Item Added to Cart");
dispatch(addToCartUnsafe(product, qty))
}
export const addToCartAndRemoveWishlist = (product,qty) => (dispatch) => {
toast.success("Item Added to Cart");
dispatch(addToCartUnsafe(product, qty));
dispatch(removeFromWishlist(product));
}
export const addToCartUnsafe = (product, qty) => ({
type: types.ADD_TO_CART,
product,
qty
});
export const removeFromCart = product_id => (dispatch) => {
toast.error("Item Removed from Cart");
dispatch({
type: types.REMOVE_FROM_CART,
product_id
})
};
export const incrementQty = (product,qty) => (dispatch) => {
toast.success("Item Added to Cart");
dispatch(addToCartUnsafe(product, qty))
}
export const decrementQty = productId => (dispatch) => {
toast.warn("Item Decrement Qty to Cart");
dispatch({
type: types.DECREMENT_QTY,
productId})
};
//it seems that I should probably use this as the basis for "Wishlist"
export const addToWishlist = (product) => (dispatch) => {
toast.success("Item Added to Wishlist");
dispatch(addToWishlistUnsafe(product))
}
export const addToWishlistUnsafe = (product) => ({
type: types.ADD_TO_WISHLIST,
product
});
export const removeFromWishlist = product_id => (dispatch) => {
toast.error("Item Removed from Wishlist");
dispatch({
type: types.REMOVE_FROM_WISHLIST,
product_id
})
};
//Compare Products
export const addToCompare = (product) => (dispatch) => {
toast.success("Item Added to Compare");
dispatch(addToCompareUnsafe(product))
}
export const addToCompareUnsafe= (product) => ({
type: types.ADD_TO_COMPARE,
product
});
export const removeFromCompare = product_id => ({
type: types.REMOVE_FROM_COMPARE,
product_id
});
// Filters
export const filterBrand = (brand) => ({
type: types.FILTER_BRAND,
brand
});
export const filterColor = (color) => ({
type: types.FILTER_COLOR,
color
});
export const filterPrice = (value) => ({
type: types.FILTER_PRICE,
value
});
export const filterSort = (sort_by) => ({
type: types.SORT_BY,
sort_by
});
// Currency
export const changeCurrency = (symbol) => ({
type: types.CHANGE_CURRENCY,
symbol
});
Api/shop.js:
/**
* Mocking client-server processing
*/
import axios from "axios";
// import _products from './data.json'
import React, { useState, useEffect } from "react";
import store from "../store";
import { receiveProducts } from "../actions/index";
const TIMEOUT = 100;
const _products = axios
.get(`http://localhost:4000/product`)
.then((response) => {
return response.data;
});
const _category = axios
.get(`http://localhost:4000/categories`)
.then((response) => {
return response.data;
});
export default {
getProducts: (cb, timeout) =>
setTimeout(() => cb(_products), timeout || TIMEOUT),
getCategories: (cb, timeout) =>
setTimeout(() => cb(_category), timeout || TIMEOUT),
buyProducts: (payload, cb, timeout) =>
setTimeout(() => cb(), timeout || TIMEOUT),
};
element-category.jsx:
import React, { Component } from "react";
import Slider from "react-slick";
import Breadcrumb from "../../common/breadcrumb";
import { Slider6, Slider4 } from "../../../services/script";
import "react-tabs/style/react-tabs.scss";
import { connect } from "react-redux";
import { getAllCategories } from "../../../actions";
class ElementCategory extends Component {
constructor(props) {
super(props);
this.state = {
categories: this.props.categories
};
}
componentDidMount() {
this.props.getAllCategories();
}
render() {
console.log(this.state.categories);
return (
<div>
<Breadcrumb parent={"Elements"} title={"Category"} />
{/*Category One*/}
<div className="container">
<section className="section-b-space">
<div className="row">
<div className="col">
<Slider {...Slider6} className="slide-6 no-arrow">
<div className="category-block">
<a href="#">
<div className="category-image">
<img
src={`${process.env.PUBLIC_URL}/assets/images/icon/cat1.png`}
alt=""
/>
</div>
</a>
<div className="category-details">
<a href="#">
<h5>shoes</h5>
</a>
</div>
</div>
<div className="category-block">
<a href="#">
<div className="category-image">
<img
src={`${process.env.PUBLIC_URL}/assets/images/icon/cat2.png`}
alt=""
/>
</div>
</a>
<div className="category-details">
<a href="#">
<h5>casual shoes</h5>
</a>
</div>
</div>
<div className="category-block">
<a href="#">
<div className="category-image">
<img
src={`${process.env.PUBLIC_URL}/assets/images/icon/cat3.png`}
alt=""
/>
</div>
</a>
<div className="category-details">
<a href="#">
<h5>formal shoes</h5>
</a>
</div>
</div>
<div className="category-block">
<a href="#">
<div className="category-image">
<img
src={`${process.env.PUBLIC_URL}/assets/images/icon/cat4.png`}
alt=""
/>
</div>
</a>
<div className="category-details">
<a href="#">
<h5>flat</h5>
</a>
</div>
</div>
<div className="category-block">
<a href="#">
<div className="category-image">
<img
src={`${process.env.PUBLIC_URL}/assets/images/icon/cat5.png`}
alt=""
/>
</div>
</a>
<div className="category-details">
<a href="#">
<h5>heels</h5>
</a>
</div>
</div>
<div className="category-block">
<a href="#">
<div className="category-image">
<img
src={`${process.env.PUBLIC_URL}/assets/images/icon/cat6.png`}
alt=""
/>
</div>
</a>
<div className="category-details">
<a href="#">
<h5>boots</h5>
</a>
</div>
</div>
<div className="category-block">
<a href="#">
<div className="category-image">
<img
src={`${process.env.PUBLIC_URL}/assets/images/icon/cat2.png`}
alt=""
/>
</div>
</a>
<div className="category-details">
<a href="#">
<h5>casual shoes</h5>
</a>
</div>
</div>
<div className="category-block">
<a href="#">
<div className="category-image">
<img
src={`${process.env.PUBLIC_URL}/assets/images/icon/cat3.png`}
alt=""
/>
</div>
</a>
<div className="category-details">
<a href="#">
<h5>casual shoes</h5>
</a>
</div>
</div>
</Slider>
</div>
</div>
</section>
</div>
{/*Category Two*/}
<section className="p-0 ratio2_1">
<div className="container-fluid">
<div className="row category-border">
<div className="col-sm-4 border-padding">
<div className="category-banner">
<div>
<img
src={`${process.env.PUBLIC_URL}/assets/images/cat1.png`}
className="img-fluid blur-up lazyload bg-img"
alt=""
/>
</div>
<div className="category-box">
<a href="#">
<h2>men</h2>
</a>
</div>
</div>
</div>
<div className="col-sm-4 border-padding">
<div className="category-banner">
<div>
<img
src={`${process.env.PUBLIC_URL}/assets/images/cat2.png`}
className="img-fluid blur-up lazyload bg-img"
alt=""
/>
</div>
<div className="category-box">
<a href="#">
<h2>women</h2>
</a>
</div>
</div>
</div>
<div className="col-sm-4 border-padding">
<div className="category-banner">
<div>
<img
src={`${process.env.PUBLIC_URL}/assets/images/cat3.png`}
className="img-fluid blur-up lazyload bg-img"
alt=""
/>
</div>
<div className="category-box">
<a href="#">
<h2>kids</h2>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
{/*Category Three*/}
<div className="container category-button">
<section className="section-b-space">
<div className="row partition1">
<div className="col">
<a href="#" className="btn btn-outline btn-block">
airbag
</a>
</div>
<div className="col">
<a href="#" className="btn btn-outline btn-block">
burn bag
</a>
</div>
<div className="col">
<a href="#" className="btn btn-outline btn-block">
briefcase
</a>
</div>
<div className="col">
<a href="#" className="btn btn-outline btn-block">
carpet bag
</a>
</div>
<div className="col">
<a href="#" className="btn btn-outline btn-block">
money bag
</a>
</div>
<div className="col">
<a href="#" className="btn btn-outline btn-block">
tucker bag
</a>
</div>
</div>
</section>
</div>
{/*Category Four*/}
<div className="category-bg ratio_square">
<div className="container-fluid p-0">
<div className="row order-section">
<div className="col-sm-4 p-0">
<a href="#" className="image-block">
<img
alt=""
src={`${process.env.PUBLIC_URL}/assets/images/cat1.jpg`}
className="img-fluid blur-up lazyload bg-img"
/>
</a>
</div>
<div className="col-sm-4 p-0">
<div className="contain-block even">
<div>
<h6>new products</h6>
<a href="#">
<h2>zipper storage bag</h2>
</a>
<a href="#" className="btn btn-solid category-btn">
-80% off
</a>
<a href="#">
<h6>
<span>shop now</span>
</h6>
</a>
</div>
</div>
</div>
<div className="col-sm-4 p-0">
<a href="#" className="image-block">
<img
alt=""
src={`${process.env.PUBLIC_URL}/assets/images/cat2.jpg`}
className="img-fluid blur-up lazyload bg-img"
/>
</a>
</div>
<div className="col-sm-4 p-0">
<div className="contain-block">
<div>
<h6>on sale</h6>
<a href="#">
<h2>tucker bag</h2>
</a>{" "}
<a href="#" className="btn btn-solid category-btn">
save 30% off
</a>
<a href="#">
<h6>
<span>shop now</span>
</h6>
</a>
</div>
</div>
</div>
<div className="col-sm-4 p-0">
<a href="#" className="image-block even">
<img
alt=""
src={`${process.env.PUBLIC_URL}/assets/images/cat3.jpg`}
className="img-fluid blur-up lazyload bg-img"
/>
</a>
</div>
<div className="col-sm-4 p-0">
<div className="contain-block">
<div>
<h6>summer sale</h6>
<a href="#">
<h2>gate check bag</h2>
</a>{" "}
<a href="#" className="btn btn-solid category-btn">
minimum 50% off
</a>
<a href="#">
<h6>
<span>shop now</span>
</h6>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
{/*Category Five*/}
<section className="ratio_portrait">
<div className="container">
<div className="row">
<div className="col">
<Slider {...Slider4} className="slide-4 category-m no-arrow">
<div>
<div className="category-wrapper">
<div>
<div>
<img
src={`${process.env.PUBLIC_URL}/assets/images/watch/cat1.png`}
className="img-fluid blur-up lazyload bg-img"
alt=""
/>
</div>
<h4>watch models</h4>
<ul className="category-link">
<li>
d1 milano
</li>
<li>
damaskeening
</li>
<li>
diving watch
</li>
<li>
dollar watch
</li>
</ul>
<a href="#" className="btn btn-outline">
view more
</a>
</div>
</div>
</div>
<div>
<div className="category-wrapper">
<div>
<div>
<img
src={`${process.env.PUBLIC_URL}/assets/images/watch/cat2.png`}
className="img-fluid blur-up lazyload bg-img"
alt=""
/>
</div>
<h4>calculator watch</h4>
<ul className="category-link">
<li>
Shock-resistant watch
</li>
<li>
Skeleton watch
</li>
<li>
Slow watch
</li>
<li>
Solar-powered watch
</li>
</ul>
<a href="#" className="btn btn-outline">
view more
</a>
</div>
</div>
</div>
<div className="category-wrapper">
<div>
<div>
<img
src={`${process.env.PUBLIC_URL}/assets/images/watch/cat3.png`}
className="img-fluid blur-up lazyload bg-img"
alt=""
/>
</div>
<h4>Antimagnetic watch</h4>
<ul className="category-link">
<li>
Watchmaking conglomerates
</li>
<li>
Breitling SA
</li>
<li>
Casio watches
</li>
<li>
Citizen Watch
</li>
</ul>
<a href="#" className="btn btn-outline">
view more
</a>
</div>
</div>
<div className="category-wrapper">
<div>
<div>
<img
src={`${process.env.PUBLIC_URL}/assets/images/watch/cat2.png`}
className="img-fluid blur-up lazyload bg-img"
alt=""
/>
</div>
<h4>History of watches</h4>
<ul className="category-link">
<li>
Manufacture d'horlogerie
</li>
<li>
Mechanical watch
</li>
<li>
Microbrand watches
</li>
<li>
MIL-W-46374
</li>
</ul>
<a href="#" className="btn btn-outline">
view more
</a>
</div>
</div>
<div className="category-wrapper">
<div>
<div>
<img
src={`${process.env.PUBLIC_URL}/assets/images/watch/cat1.png`}
className="img-fluid blur-up lazyload bg-img"
alt=""
/>
</div>
<h4>watch models</h4>
<ul className="category-link">
<li>
d1 milano
</li>
<li>
damaskeening
</li>
<li>
diving watch
</li>
<li>
dollar watch
</li>
</ul>
<a href="#" className="btn btn-outline">
view more
</a>
</div>
</div>
</Slider>
</div>
</div>
</div>
</section>
{/*Category Six*/}
<section className="section-b-space">
<div className="container">
<div className="row background">
<div className="col">
<a href="#">
<div className="contain-bg">
<h4 data-hover="size 06">size 06</h4>
</div>
</a>
</div>
<div className="col">
<a href="#">
<div className="contain-bg">
<h4>size 07</h4>
</div>
</a>
</div>
<div className="col">
<a href="#">
<div className="contain-bg">
<h4>size 08</h4>
</div>
</a>
</div>
<div className="col">
<a href="#">
<div className="contain-bg">
<h4>size 09</h4>
</div>
</a>
</div>
<div className="col">
<a href="#">
<div className="contain-bg">
<h4>size 10</h4>
</div>
</a>
</div>
</div>
</div>
</section>
</div>
);
}
}
const mapStateToProps = store => {
return {
categories: store.category.categories
};
};
// export default connect(mapStateToProps, { getAllCategories })(ElementCategory);
export default connect(mapStateToProps, { getAllCategories })(ElementCategory);

If found error !! Element type is invalid: expected a string

I have error on my react js projects, i've searched in google but all did not give me the solution
I got error like this :
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Look my code :
ArticleAll.js
import React from 'react';
import Navigation from '../partials/Navigation';
import ArticleCard from './ArticleCard';
import Footer from '../partials/Footer';
class ArticleAll extends React.Component {
render() {
return (
<div class="page-wrapper">
<div id="control-body" class="fixed-sidebar medium-sidebar fixed-nav">
<Navigation/>
<main class="page-body">
<div class="row">
<div class="col s12 page-title-div">
<h1 class="header">Cards</h1>
<ol class="breadcrumbs left">
<li>Dashboard</li>
<li>Advanced UI</li>
<li class="active">Cards</li>
</ol>
<a class='dropdown-button dropdown-hover waves-effect waves-light page-help right' href='javascript:void(0)' data-activates='dropdown-help'>
<i class="material-icons">help</i>
</a>
<ul id='dropdown-help' class='dropdown-content'>
<li>API</li>
<li>Blog</li>
<li>Docs</li>
</ul>
</div>
</div>
<section class="section">
<div class="row ">
<ArticleCard/>
</div>
</section>
</main>
<Footer/>
</div>
</div>
)
}
}
export default ArticleAll;
ArticleCard.js
import React from 'react';
class ArticleCard extends React.Component {
render() {
return (
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
</div>
</div>
</div>
)
}
}
export default ArticleCard;
Routes.js
import React from 'react';
import { BrowserRouter, Route} from 'react-router-dom';
import Home from '../components/Home';
import Login from '../components/auth/Login';
import Register from '../components/auth/Register';
import ArticleAll from '../components/article/ArticleAll';
class Routes extends React.Component {
render() {
return (
<BrowserRouter>
<div>
{this.props.children}
<Route exact path="/" component={Home}/>
<Route exact path="/login" component={Login}/>
<Route exact path="/register" component={Register}/>
<Route exact path="/article" component={ArticleAll}/>
</div>
</BrowserRouter>
)
}
}
export default Routes;
Navigation.js
import React from 'react';
import ReactDOM from 'react-dom';
class Navigation extends React.Component {
render() {
return (
<div>
<nav class="page-header z-depth-3">
<div class="nav-wrapper">
<a id="logo-container" href="#" class="brand-logo hide-on-med-and-down">materialcss</a>
<ul class="left">
<li class="hide-on-large-only">
<a href="javascript:void(0)" id="toggle-left-sidebar" class="hrz-menu waves-effect waves-default">
<i class="material-icons">menu</i>
</a>
</li>
</ul>
<ul class="right">
<li>
<a href="javascript:void(0)" class="hrz-menu waves-effect waves-default hide-show-nav-search">
<i class="material-icons">search</i>
</a>
</li>
<li>
<a href="javascript:void(0)" class="hrz-menu dropdown-button dropdown-belowOrigin waves-effect waves-default" data-activates="notification-list-dropdown">
<i class="material-icons">notifications</i>
<span id="notification-cout">25</span>
</a>
</li>
<li id="user-account-box">
<a href="javascript:void(0)" class="hrz-menu dropdown-button dropdown-belowOrigin dropdown-widthChange waves-effect waves-default" data-activates="user-account-dropdown">
<i class="material-icons">account_circle</i>
</a>
</li>
</ul>
<ul id="notification-list-dropdown" class="width-400 dropdown-content">
<li>
<a href="#!">
<i class="material-icons">email</i>
</a>
<p class="noti-message">
<a href="#!">New mail from jhon
<span>15 minutes ago</span>
</a>
</p>
</li>
<li>
See All
</li>
</ul>
<ul id="user-account-dropdown" class="dropdown-content">
<li>
<a href="#!">
<i class="material-icons">perm_identity</i>My Profile
</a>
</li>
<li>
<a href="javascript:void(0)" class="toggle-right-sidebar">
<i class="material-icons">settings</i>Page Customizer
</a>
</li>
<li class="divider"></li>
<li>
<a href="#!">
<i class="material-icons">lock</i>Lock
</a>
</li>
<li>
<a href="#!">
<i class="material-icons">power_settings_new</i>Logout
</a>
</li>
</ul>
<div class="search-overlay hide"></div>
<div id="search-body" class="z-depth-1">
<form class="search-box">
<div class="input-field z-depth-1">
<input id="search" type="search" autocomplete="off" required="required" />
<label class="label-icon" for="search">
<i class="material-icons">search</i>
</label>
<i class="material-icons hide-show-nav-search">close</i>
</div>
</form>
</div>
</div>
</nav>
<aside>
<div class="left-sidebar-overlay"></div>
<div class="left-sidebar z-depth-3">
<div class="md-logo-container hide-on-large-only theme-bg">
<a class="md-brand-logo white-text" href="#">WhoamiHub</a>
</div>
<div class="left-sidebar-body">
<div class="current-subscription">
<table>
<tbody>
<tr>
<td class="center">
<span class="current-plan">Business</span>
<span class="price">$49/month</span>
</td>
<td class="center">
UPGRADE
</td>
</tr>
</tbody>
</table>
</div>
<div class="divider"></div>
<ul class="leftside-navigation">
<li class="navigation">Menu</li>
<li>
<a href="dashboard.html" class="menu waves-effect waves-default tooltipped" data-position="right" data-delay="50" data-tooltip="Dashboard">
<i class="material-icons left-icon">dashboard</i>Dashboard
</a>
</li>
<li>
<a href="javascript:void(0)" class="collapsible-label1 waves-effect waves-default tooltipped" data-position="right" data-delay="50" data-tooltip="Material UI">
<i class="material-icons left-icon">build</i>
<i class="material-icons right-icon">arrow_drop_down</i>Material UI
</a>
<ul class="collapsible-body">
<li>
Buttons
</li>
<li>
Breadcrumbs
</li>
<li>
Collections
</li>
<li>
Collapsibles
</li>
<li>
Dropdown
</li>
<li>
Tabs
</li>
<li>
Pagination
</li>
<li>
Preloader
</li>
<li>
Toasts
</li>
<li>
Tooltip
</li>
<li>
Waves
</li>
</ul>
</li>
</ul>
</div>
<div class="sidebar-footer">
<a href="javascript:void(0)" id="collapsed-left-sidebar" class="toggle-icon-left-sidebar waves-effect waves-default">
<i class="right material-icons">keyboard_arrow_left</i>
</a>
</div>
</div>
</aside>
</div>
)
}
}
export default Navigation;
Footer.js
import React from 'react';
class Footer extends React.Component {
render() {
return (
<div>
<footer class="page-footer">
<div class="footer-copyright">
<div class="left">© materialcss</div>
<div class="right"><i class="material-icons">arrow_upward</i></div>
</div>
</footer>
</div>
)
}
}
export default Footer;

return (
<div>
<footer class="page-footer">
class is a reserved JS keyword. You must use className instead --
<footer className="page-footer" />

import React from 'react';
class ArticleCard extends React.Component {
render() {
return (
<div className="col s12 m6">
<div className="card blue-grey darken-1">
<div className="card-content white-text">
<span className="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div className="card-action">
This is a link
This is a link
</div>
</div>
</div>
)
}
}
export default ArticleCard;

how to update Owl Carousel with React js

I'm using Owl Carousel in reactjs. I'm using this library as a <link .. inside my header.
I have a Slider component and I use Owl Carousel inside it.
when I call my api, my <img ... tags will update. I should re-render my Owl carousel because without it my images show as usual img tag.
my index file:
...
<link rel="stylesheet" href="../../assets/plugin/slider/css/owl.carousel.min.css">
<link rel="stylesheet" href="../../assets/plugin/slider/css/owl.theme.default.min.css">
...
<div id="root"></div>
...
<script src="../../assets/plugin/jquery-2.1.1.js"></script>
<script src="../../assets/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="../../assets/home/js/script.js"></script>
<script src="../../assets/plugin/counterdown/js/countdown-timer.js"></script>
<script src="../../assets/plugin/star_rating/js/script.js"></script>
<script src="../../assets/plugin/slider/js/owl.carousel.min.js"></script>
my slider component:
import React, { Component } from 'react'
import { Link } from 'react-router'
import Shopname from '../components/product/Shopname'
import Description from '../components/product/Description'
import Countdown from '../components/product/Countdown'
import { serverConstants } from '../constants';
class Slider extends Component {
constructor(props) {
super(props);
this.state = {slider_images: []}
}
componentWillReceiveProps(nextProps){
this.setState({ slider_images : nextProps.slider_images });
console.log(this.state.slider_images)
}
render() {
return (
<section id="main">
<div className="container-fluid">
<div className="col-md-3 hidden-xs hidden-sm" id="sideMenu">
<ul className="list-unstyled">
<a href="#">
<li className="active">
<span><i className="fa fa-th"></i></span><span>همه</span>
</li>
</a>
<a href="#">
<li>
<span><i className="fa fa-cutlery"></i></span><span>رستوران و کافی شاپ </span>
</li>
</a>
<a href="#">
<li>
<span><i className="fa fa-dribbble"></i></span><span>تفریحی و ورزشی</span>
</li>
</a>
<a href="#">
<li>
<span><i className="fa fa-stethoscope"></i></span><span>پزشکی و سلامت</span>
</li>
</a>
<a href="#">
<li>
<span><i className="fa fa-film"></i></span><span>فرهنگی و هنری</span>
</li>
</a>
<a href="#">
<li>
<span><i className="fa fa-leaf"></i></span><span>آرایشی و زیبایی</span>
</li>
</a>
<a href="#">
<li className="last-child">
<span><i className="fa fa-tags"></i></span><span>کالا</span>
</li>
</a>
</ul>
</div>
<div className="col-sm-12 col-md-9" id="bestOffer">
<div className="col-sm-7 col-sm-push-5 left">
<div className="owl-one owl-carousel owl-theme">
{
this.state.slider_images.map(function(item, i){
return <img key={i} src={serverConstants.URL_IMAGE_COUPON+item.title} alt={item.alt} />
})
}
</div>
</div>
<div className="col-sm-5 col-sm-pull-7 right">
<div className="head">
<Shopname title="باغ رستوران سفره ایران"/>
<h4>منوی باز باغ رستوران سفره ایرانی</h4>
<div className="subtitle">
<Description title="سفره ایرانی و پرداخت تنها ۷۵۰۰ تومان به جای ۱۵۰۰۰ تومان . شادیاب لحظه ای :‌ سفره ایرانی و پرداخت تنها ۷۵۰۰ تومان به جای ۱۵۰۰۰ تومان " />
</div>
</div>
<div className="discount">
<div className="info">
<div>
<img src="assets/home/img/icons/heartbeat.svg" /><span>خرید</span><span>۱۵</span>
</div>
<div>
<i className="fa fa-map-marker"></i><span>تهران</span>
</div>
</div>
<div className="price">
<div>
<strike>۱۵۰۰۰</strike>
</div>
<div>
<span>۷۵۰۰</span><span>تومان</span>
</div>
</div>
<div className="bullet">
<span>٪۵۰</span>
</div>
</div>
<hr />
<Countdown />
<hr />
<div className="button">
<button><img src="assets/home/img/icons/ic_shopping_cart_24px.svg" />سبد خرید</button>
<button><img src="assets/home/img/icons/details.svg" />جزئیات</button>
</div>
</div>
</div>
</div>
</section>
)
}
}
export default Slider