We Keep Coding

Uncaught TypeError: state.productDetails is not a function

import React, { useEffect } from "react";
import Loader from "../layout/Loader";
import { useAlert } from "react-alert";
import { useDispatch, useSelector } from "react-redux";
import { getProductDetails, clearErrors } from "../../actions/productActions";
const ProductDetails = ({ match }) => {
const dispatch = useDispatch();
const alert = useAlert();
const { loading, error, product } = useSelector((state) =>
state.productDetails()
);
useEffect(() => {
dispatch(getProductDetails());
if (error) {
alert.error(error);
dispatch(clearErrors());
}
}, [dispatch, alert, error]);
return (
<>
{!loading ? (
<Loader />
) : (
<>
<div className='row f-flex justify-content-around'>
<div className='col-12 col-lg-5 img-fluid' id='product_image'>
<img
src='https://i5.walmartimages.com/asr/1223a935-2a61-480a-95a1-21904ff8986c_1.17fa3d7870e3d9b1248da7b1144787f5.jpeg?odnWidth=undefined&odnHeight=undefined&odnBg=ffffff'
alt='sdf'
height='500'
width='500'/>
</div>
<div className='col-12 col-lg-5 mt-5'>
<h3>{product.name}</h3>
<p id='product_id'>Product # sklfjdk35fsdf5090</p>
<hr />
<div className='rating-outer'>
<div className='rating-inner'></div>
</div>
<span id='no_of_reviews'>(5 Reviews)</span>
<hr />
<p id='product_price'>$108.00</p>
<div className='stockCounter d-inline'>
<span className='btn btn-danger minus'>-</span>
<input
type='number'
className='form-control count d-inline'
value='1'
readOnly
/>
<span className='btn btn-primary plus'>+</span>
</div>
<button
type='button'
id='cart_btn'
className='btn btn-primary d-inline ml-4'
>
Add to Cart
</button>
<hr />
<p>
Status: <span id='stock_status'>In Stock</span>
</p>
<hr />
<h4 className='mt-2'>Description:</h4>
<p>
Binge on movies and TV episodes, news, sports, music and more!
We insisted on 720p High Definition for this 32" LED TV,
bringing out more lifelike color, texture and detail. We also
partnered with Roku to bring you the best possible content with
thousands of channels to choose from, conveniently presented
through your own custom home screen.
</p>
<hr />
<p id='product_seller mb-3'>
Sold by: <strong>Amazon</strong>
</p>
<button
id='review_btn'
type='button'
className='btn btn-primary mt-4'
data-toggle='modal'
data-target='#ratingModal'
>
Submit Your Review
</button>
<div className='row mt-2 mb-5'>
<div className='rating w-50'>
<div
className='modal fade'
id='ratingModal'
tabIndex='-1'
role='dialog'
aria-labelledby='ratingModalLabel'
aria-hidden='true'
>
<div className='modal-dialog' role='document'>
<div className='modal-content'>
<div className='modal-header'>
<h5 className='modal-title' id='ratingModalLabel'>
Submit Review
</h5>
<button
type='button'
className='close'
data-dismiss='modal'
aria-label='Close'
>
<span aria-hidden='true'>×</span>
</button>
</div>
<div className='modal-body'>
<ul className='stars'>
<li className='star'>
<i className='fa fa-star'></i>
</li>
<li className='star'>
<i className='fa fa-star'></i>
</li>
<li className='star'>
<i className='fa fa-star'></i>
</li>
<li className='star'>
<i className='fa fa-star'></i>
</li>
<li className='star'>
<i className='fa fa-star'></i>
</li>
</ul>
<textarea
name='review'
id='review'
className='form-control mt-3'
></textarea>
<button
className='btn my-3 float-right review-btn px-4 text-white'
data-dismiss='modal'
aria-label='Close'
>
Submit
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
)}
</>
);
};
export default ProductDetails;

As the error suggests
state.productDetails is not a function
This is because productDetails is a reducer object and Not a function created by redux. Hence, your code should be
const { loading, error, product } = useSelector((state) =>state.productDetails); //Note: productDetails without '()'
Hope it helps.
Side Note: While posting any question or answer please format the code properly next time so it's readable. :)

bootstrap card shows vertically instead of being responsive

The data variable contains all the data needed for this operation the problem is that the frontend shows card one below the other whereas I want it to show 3 or 4 in one row. I can assure that the error is not with the react or the graphql, the error is in the bootstrap or the way I am rendering the data.
I just want a responsive design so at first i have created a html css bootstrap ui which was perfectly working and was responsive but when i combined it with the data it lost its responsiveness and now it shows cards one below the other.
here is the image of how it is currentlyIt shows that there is a card but no other card along the row
Here is my code:
import React, { useState } from "react";
import { gql, useQuery } from "#apollo/client";
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
const getBooksQuery = gql`
{
books {
name
id
genre
author {
name
}
description
rating
image
}
}
`;
function BooksDisplay() {
const { loading, error, data } = useQuery(getBooksQuery);
var [selected, setSelected] = useState("");
if (loading) return <p>Loading....</p>;
if (error) return <p>Ops! Something went wrong</p>;
return (
<div>
<div id="book-list">
{data.books.map((book) => (
<div className="container-fluid my-5 books_section">
<div className="row">
<div className="col-xl-3 col-lg-4 col-sm-6 col-12 mt-4">
<div className="card h-100">
<img src={book.image} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title font-weight-bold text-secondary">
{book.name}
</h5>
<span className="card-text">
{book.description}
<div className="collapse m-0" id="collapseExample">
<div className="card card-body border-0 p-0">
{book.description}
</div>
</div>
</span>
<a
className="card-link d-block"
data-toggle="collapse"
href="#collapseExample"
role="button"
aria-expanded="false"
aria-controls="collapseExample">
See More
</a>
</div>
<ul className="list-group list-group-flush">
<li className="list-group-item">
Authors:
<span>
{book.author.map((author) => author.name).join(" ")}
</span>
</li>
<li className="list-group-item">
Genre: <span>{book.genre.join(" ")}</span>
</li>
<li className="list-group-item">
Ratings: <span>{book.rating}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
))}
</div>
{/* <BookDetail bookid={selected} /> */}
</div>
);
}
function BookList() {
return (
<div>{BooksDisplay()}</div>
);
}
export default BookList;

You need to iterate the columns instead of the container...
import React, { useState } from "react";
import { gql, useQuery } from "#apollo/client";
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
const getBooksQuery = gql`
{
books {
name
id
genre
author {
name
}
description
rating
image
}
}
`;
function BooksDisplay() {
const { loading, error, data } = useQuery(getBooksQuery);
var [selected, setSelected] = useState("");
if (loading) return <p>Loading....</p>;
if (error) return <p>Ops! Something went wrong</p>;
return (
<div>
<div id="book-list">
<div className="container-fluid my-5 books_section">
<div className="row">
{data.books.map((book) => (
<div className="col-xl-3 col-lg-4 col-sm-6 col-12 mt-4">
<div className="card h-100">
<img src={book.image} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title font-weight-bold text-secondary">
{book.name}
</h5>
<span className="card-text">
{book.description}
<div className="collapse m-0" id="collapseExample">
<div className="card card-body border-0 p-0">
{book.description}
</div>
</div>
</span>
<a
className="card-link d-block"
data-toggle="collapse"
href="#collapseExample"
role="button"
aria-expanded="false"
aria-controls="collapseExample">
See More
</a>
</div>
<ul className="list-group list-group-flush">
<li className="list-group-item">
Authors:
<span>
{book.author.map((author) => author.name).join(" ")}
</span>
</li>
<li className="list-group-item">
Genre: <span>{book.genre.join(" ")}</span>
</li>
<li className="list-group-item">
Ratings: <span>{book.rating}</span>
</li>
</ul>
</div>
</div>
))}
</div>
</div>
</div>
{/* <BookDetail bookid={selected} /> */}
</div>
);
}
function BookList() {
return (
<div>{BooksDisplay()}</div>
);
}
export default BookList;

Just put these 2 tags out of the loop
< div className="container-fluid my-5 books_section">
< div className="row">
And it will work.

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

Uncaught (in promise) Error: Unable to find element with ID 104

when I use setState inside then promise I got this error:
Uncaught (in promise) Error: Unable to find element with ID 104.
at invariant (invariant.js?4599:42)
at precacheChildNodes (ReactDOMComponentTree.js?8ff5:101)
at getNodeFromInstance (ReactDOMComponentTree.js?8ff5:177)
at ReactDOMComponent.getHostNode (ReactDOMComponent.js?ab8a:949)
at Object.getHostNode (ReactReconciler.js?399b:60)
at ReactDOMComponent._updateChildren (ReactMultiChild.js?9682:342)
at ReactDOMComponent.updateChildren (ReactMultiChild.js?9682:295)
at ReactDOMComponent._updateDOMChildren (ReactDOMComponent.js?ab8a:944)
at ReactDOMComponent.updateComponent (ReactDOMComponent.js?ab8a:758)
at ReactDOMComponent.receiveComponent (ReactDOMComponent.js?ab8a:720)
at Object.receiveComponent (ReactReconciler.js?399b:122)
at Object.updateChildren (ReactChildReconciler.js?dd13:107)
at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js?9682:204)
at ReactDOMComponent._updateChildren (ReactMultiChild.js?9682:308)
at ReactDOMComponent.updateChildren (ReactMultiChild.js?9682:295)
at ReactDOMComponent._updateDOMChildren (ReactDOMComponent.js?ab8a:944)
whole component:
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import Helmet from 'react-helmet'
import Header from '../components/Header'
import Menu from '../components/Menu'
import Slider from '../components/Slider'
import Advertisement from '../components/Advertisement'
import Products from '../components/Products'
import Notice from '../components/Notice'
import Footer from '../components/Footer'
import Copyright from '../components/Copyright'
import {couponsService} from '../services'
//import '../assets/home/css/style.css'
class Intro extends Component {
constructor(props) {
super(props);
this.getCoupons = this.getCoupons.bind(this);
this.state = {coupons: {}};
}
render() {
return (
<div>
<Helmet />
<Header />
<Menu />
<Slider slider={this.state.coupons.slider} slider_images={this.state.coupons.slider_images} />
<Advertisement />
<Products />
<Notice />
<Footer />
<Copyright />
</div>
)
}
componentDidMount() {
this.getCoupons();
}
getCoupons(){
couponsService.getAll(1)
.then(
(coupons) => {
console.log(coupons);
this.setState({
coupons: coupons
});
// history.push('/');
},
error => {
// dispatch(failure(error));
//dispatch(alertActions.error(error));
}
);
}
}
function mapStateToProps() {
return {}
}
export default connect(mapStateToProps)(Intro)
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'
class Slider extends Component {
constructor(props) {
super(props);
this.state = {slider_images: []}
}
componentWillMount() {
this.setState({ slider_images : this.props.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? (
<p>ok</p>
) : (
<p>ooops</p>
)}
</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