Problem
I have the problem that the value of the property :torrent of the ShowVideo component is not updating.
In the MovieSection component there is a select to choose options, it uses a torrent_selected v-model to save the selected data, when changing options it saves the changes but the value of :torrent.sync = "torrent_selected.torrent_magnet" It remains the same.
The ShowVideo component is supposed to update the video once the property is updated.
ShowVideo: Component
<template>
<div>
<div id='player' style="display: block; background: #000; margin: 0 auto;" class='webtor'></div>
</div>
</template>
<script>
import { onMounted, watch } from '#vue/composition-api';
import { loadPlayer } from '../utils/index';
export default {
name: "ShowVideo",
props: {
torrent: String
},
setup(props) {
let data = props.torrent;
// data is not updating ...
watch(() =>
data,
value =>{
data = value;
let d = data;
loadPlayer(d);
}
)
onMounted(()=> loadPlayer(data));
return {
data
};
}
};
</script>
MovieSection
<template>
<!--Begin: Main-->
<div id="main-wrapper">
<!--Begin: Detail-->
<div class="detail_page detail_page-style">
<div
class="cover_follow"
:style="{ 'background-image': 'url(' + data[0][0].poster_big + ')' }"
></div>
<div class="container">
<div class="prebreadcrumb">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<router-link :to="{ name: 'Movies' }">Movies</router-link>
</li>
<li class="breadcrumb-item active" aria-current="page">
{{ data[0][0].title }}
</li>
</ol>
</nav>
</div>
<!--Begin: Watch-->
<div class="detail_page-watch">
<div class="dp-w-cover">
<!-- <div class="dp-w-c-play goto-seasons">
<i class="fa fa-play"></i>
</div> -->
</div>
<div class="detail_page-infor">
<div class="dp-i-content">
<div class="dp-i-c-poster">
<div class="film-poster mb-2">
<img
class="film-poster-img"
:src="data[0][0].poster_big"
:title="data[0][0].title"
:alt="data[0][0].title"
/>
</div>
<div class="block-rating" id="block-rating"></div>
</div>
<div class="dp-i-c-right">
<h2 class="heading-name">
<div>{{ data[0][0].title }}</div>
</h2>
<div class="dp-i-stats">
<span class="item mr-1">
<button
#click.prevent="() => (show = !show)"
title="Trailer"
class="btn btn-sm btn-trailer"
>
<i class="fas fa-video mr-2"></i>Trailer
</button>
</span>
<span class="item mr-1"
><button class="btn btn-sm btn-quality">
<strong>HD</strong>
</button></span
>
<span class="item mr-2"
><button class="btn btn-sm btn-radius btn-warning btn-imdb">
{{ data[0][0].rating }}
</button></span
>
</div>
<div class="description">
{{ data[0][0].description }}
</div>
<div class="elements">
<div class="row">
<div class="col-xl-5 col-lg-6 col-md-8 col-sm-12">
<div class="row-line">
<span class="type"><strong>Released: </strong></span>
{{ data[0][0].year }}
</div>
<div class="row-line">
<span class="type"><strong>Genre: </strong></span>
{{ data[0][0].genres && data[0][0].genres.toString() }}
</div>
<div class="row-line">
<span class="type"><strong>Actors: </strong></span>
{{
(data[0][0].actors && data[0][0].actors.toString()) ||
"n/a"
}}
</div>
<div class="row-line">
<span class="type"><strong>Directors: </strong></span>
{{
(data[0][0].directors &&
data[0][0].directors.toString()) ||
"n/a"
}}
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-4 col-sm-12">
<div class="row-line">
<span class="type"><strong>Runtime: </strong></span>
{{ data[0][0].runtime }}
</div>
<div class="row-line">
<span class="type"><strong>Writers: </strong></span>
{{
(data[0][0].writers &&
data[0][0].writers.toString()) ||
"n/a"
}}
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!--Trailer-->
<div v-if="show">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="iframe16x9">
<iframe
width="560"
height="315"
id="iframe-trailer"
:src="data[0][0].trailer_url"
frameborder="0"
allow="autoplay;"
allowfullscreen
></iframe>
</div>
<button
#click.prevent="() => close()"
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
</div>
<!--End: Trailer-->
<div
class="alert mb-3"
style="
background: #ffaa00;
color: #111;
font-size: 16px;
font-weight: 600;
"
>
If you get any error message when trying to stream, please Refresh
the page or switch to another torrent.
</div>
<div class="watching_player-control">
<div id="pc-fav" class="btn btn-sm btn-radius btn-secondary mr-2">
<i class="fa fa-magnet mr-2"></i>Select Torrent
</div>
<select v-model="torrent_selected">
<option
v-for="(options, index) in data[0][0].torrents.items"
:value="options"
:key="index"
>
{{ options.file }}
</option>
</select>
<div class="clearfix"></div>
<!--torrent video-->
<div v-if="torrent_selected">
<ShowVideo :torrent.sync="torrent_selected.torrent_magnet" />
<i></i>Quality: {{ torrent_selected.quality }} <i></i>Peers:
{{ torrent_selected.torrent_peers }} <i></i>Seeds:
{{ torrent_selected.torrent_seeds }}
<a
:href="torrent_selected.torrent_magnet"
download
title="Download Torrent"
>
<i class="fa fa-magnet mr-2"></i>Download Torrent
</a>
</div>
<!--End: torrent video-->
</div>
</div>
<!--End: Watch-->
</div>
</div>
<!--End: Related-->
</div>
<!--End: Main-->
</template>
<script>
import { nSQL } from "#nano-sql/core";
import { useRouter } from "#u3u/vue-hooks";
import { ref } from "#vue/composition-api";
import ShowVideo from "../components/ShowVideo";
export default {
name: "MovieSection",
components: {
ShowVideo
},
setup() {
const { route } = useRouter();
const data = ref([]);
const id = ref(route.value.params.id);
nSQL().useDatabase("popcorntimedb");
nSQL("movies");
nSQL()
.query("select")
.where(["ID", "=", id.value])
.exec()
.then(rows => {
data.value.push(rows);
});
const show = ref(false);
const torrent_selected = ref(null);
const close = () => (show.value = false);
return {
data,
torrent_selected,
show,
close,
id
};
}
};
</script>
Because you are making a copy of props.torrent and watching that copy for changes....which never happens. Just watch the prop
setup(props) {
watch(() =>
props.torrent,
value => {
loadPlayer(props.torrent);
}
)
onMounted(()=> loadPlayer(props.torrent));
}
Related
In the "card-text" class it calls the text from the Json file but it is too long I would like to cut the text and add actions click on the "Read More" button but for only the clicked card to react, someone something ?
<template>
<div class="container">
<Modal
v-if="showModal && GET_TRAILER.payload !== null"
v-on:close="closeModal"
:trailerAdress="GET_TRAILER.payload"
></Modal>
<div>
<div class="row" v-for="(obj,index) in GET_MOVIE" :key="index">
<div class="card col-12 col-lg-3" style="width: 10rem;" v-for="movie in obj.payload" :key="movie.id">
<img class="card-img-top" :src="`https://image.tmdb.org/t/p/w500${movie.poster_path}`" />
<div class="card-body">
<h5 class="card-title">{{movie.original_title}}</h5>
<p class="card-text">
{{movie.overview}}
</p>
<div class="buttonPosition">
<button
v-on:click="OpenTrailerModal(movie.id)"
type="button"
class="btn btn-success"
>Watch Trailer</button>
</div>
</div>
</div>
</div>
</div>
<button #click="MoreMovies" type="button" class="btn btn-warning moreBtn">Load More Movies</button>
</div>
</template>
Try this below :
<template>
<div class="container">
<Modal
v-if="showModal && GET_TRAILER.payload !== null"
v-on:close="closeModal"
:trailerAdress="GET_TRAILER.payload"
></Modal>
<div>
<div class="row" v-for="(obj,index) in GET_MOVIE" :key="index">
<div class="card col-12 col-lg-3" style="width: 10rem;" v-for="movie in obj.payload" :key="movie.id">
<img class="card-img-top" :src="`https://image.tmdb.org/t/p/w500${movie.poster_path}`" />
<div class="card-body">
<h5 class="card-title">{{movie.original_title}}</h5>
---------------------- Add this part ------------------------------
<div class="card-text">
<p v-if="movie.readMore">
{{ movie.overview | limitDisplay }}
<a v-if="movie.overview.length > 100" #click="toggleReadMore(obj.payload, movie.id, false)">Read More<a>
</p>
<p v-if="!movie.readMore">
{{ movie.overview }}
<a #click="toggleReadMore(true)">Read Less<a>
</p>
</div>
---------------------------------------------------------------
<div class="buttonPosition">
<button
v-on:click="OpenTrailerModal(movie.id)"
type="button"
class="btn btn-success"
>Watch Trailer</button>
</div>
</div>
</div>
</div>
</div>
<button #click="MoreMovies" type="button" class="btn btn-warning moreBtn">Load More Movies</button>
</div>
</template>
In your script add this in your methods and filters :
methods: {
toggleReadMore(payload, movie_id, value){
payload = payload.map(function(item){
if(item.id == movie_id){
item['readMore'] = value;
return item
}
});
}
},
filters : {
limitDisplay: function(value) {
return value.substring(0, 100) + "...";
}
}
When i open this template I need to find out one div scrollHeight from the code this.myScrollContainer.nativeElement.scrollHeight. But I am getting nativeElement. Actually div scroll is coming top to bottom. What I need to do is scroll bottom to top. Does anyone know what is the issue?
<ng-template #ModalReviewHistory>
<div class="modal-header">
{{ "workFlowCommentsHistory.commentModalTitle" | translate }}
<button
type="button"
class="close pull-right"
aria-label="Close"
(click)="modalRef.hide()"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body scroll" #scrollMe >
<div class="container box" *ngIf="commentHistory === null">
{{ "workFlowCommentsHistory.noCommentMessage" | translate }}
</div>
<!-- <ul class="p-0"> -->
<div class="round" *ngFor="let comments of commentHistory; let i = index">
<div class="bs-callout bs-callout-default mb-0">
<div class="talktext pt-1">
<div class="row">
<div class="col-4 font-12">
<strong>{{ comments?.creator?.firstName }}</strong> |
<strong>{{ comments.role }}</strong>
</div>
<div class="col-5 font-12">
{{ comments?.creator?.createdAt | myDateFormat }}
</div>
<!-- <div class="col-5"></div> -->
<div class="col-2 text-left">
<div
*ngIf="
comments.formKey === 'edjw:panelReviewTask' ||
comments.consolidatedTask === true
"
>
<button
(click)="clickViewMore(comments.id, FeedbackModel)"
type="button"
class="btn btn-outline-primary font-12 btn-sm"
>
{{ "workFlowCommentsHistory.viewBtn" | translate }}
</button>
</div>
</div>
<div class="col-1 text-right">
<button
(click)="onClickReplyToComment(i, comments)"
class="btn btn-outline-primary btn-sm"
title="Reply"
>
<i class="fa fa-reply text-info"></i>
</button>
</div>
</div>
<div class="row pl-3">
{{ comments?.contents }}
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-3"></div>
<div *ngIf="comments.repliesPost" class="col-9">
<div
*ngFor="let reply of comments.repliesPost; let index = index"
[ngClass]="{
'bs-callout bs-callout-default margin-5-left':
reply.isCommentOwner,
'bs-callout-right bs-callout-default-right margin-6-right': !reply.isCommentOwner
}"
>
<!-- <p
*ngIf="
lineCommentReplyEditIndex.replyIndex !== index ||
lineCommentReplyEditIndex.commentIndex !== commentIndex
"
[innerHTML]="reply.contents"
></p> -->
<div class="row">
<div class="col-9 font-12">
<strong>
{{ reply.creator }} |
{{ reply.createdAt | myDateFormat }}</strong
>
</div>
</div>
<div class="row pl-3 py-2">
{{ reply?.contents }}
</div>
</div>
</div>
</div>
<div *ngIf="lineCommentReplyIndex === i" class="row">
<form [formGroup]="lineNumberReplyCommentForm" novalidate>
<div class="col-md-1"></div>
<div class="col-md-9">
<div class="form-group">
<textarea
placeholder="Your comment goes here..."
pInputTextarea
formControlName="comment"
class="form-control"
rows="2"
style="width: 350px;"
></textarea>
<div
class="ui-message ui-messages-error ui-corner-all"
*ngIf="
lineNumberReplyCommentForm.controls['comment'].invalid &&
lineNumberReplyCommentForm.controls['comment'].dirty
"
>
<i class="fa fa-close"></i>
<span
*ngIf="
lineNumberReplyCommentForm.controls['comment'].errors
.required
"
>{{
"lineComments.viewLineComment.replyCommentValidation"
| translate
}}</span
>
</div>
</div>
</div>
<div class="col-md-2">
<button
(click)="submitlineNumberReplyCommentForm()"
class="btn btn-primary"
>
{{ "lineComments.viewLineComment.replyBtn" | translate }}
</button>
</div>
</form>
</div>
</div>
<!-- </ul> -->
</div>
<div class="modal-footer">
<button
(click)="modalRef.hide()"
type="button"
class="btn btn-outline-primary"
>
{{ "prReviewResponseModal.cancel" | translate }}
</button>
</div>
</ng-template>
#ViewChild('scrollMe') myScrollContainer: ElementRef;
#ViewChild('ModalReviewHistory') ModalReviewHistory: ElementRef;
onShowReviewerList() {
this.modalRef = this.modalService.show(this.ModalReviewHistory,
Object.assign({}, {
class: 'gray modal-lg'
},
this.config));
this.scrollToBottom();
}
scrollToBottom() {
this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
}
<ng-template> isn't a physical element in the DOM. Converting this to a <div> or something that is created in the DOM should fix your problem.
For example:
<div #ModalReviewHistory>
<!-- modal stuff here -->
</div>
You can diagnose this by inspecting the HTML that gets created. You will see that <ng-template> doesn't exist.
Problem:
I have a v-for of cards with interpolated data. When someone clicks a card, it triggers a modal component (separate component, using slots).
I want to display the data (title, img, previewUrl, downloadUrl) for whatever card was clicked in the modal, but currently I'm getting an error:
is not defined on the instance but referenced during render
Obviously data is not getting passed into the modal, even though I'm referencing the (card). I want to pass it the index of the card that was clicked, but am unsure of the best way to do this.
I assume that slots can be used to pass dynamic v-for data in the way I'm doing it. I hope I won't have to switch to props as that would muddy things.
Tried so far:
<!-- Cards -->
<div class="card-wrapper">
<div v-for="(card, index) in cards" :key="index" class="card">
<div #click="showModal(card)" class="card-body">
<img :src="card.img" alt="resource img" />
<h4 class="card-title">{{ card.title }}</h4>
<h6 class="card-subtitle">{{ card.subtitle }}</h6>
</div>
</div>
</div>
<!-- MODAL -->
<Modal v-show="isModalVisible" #close="closeModal">
<template v-slot:header>{{ img }} </template>
<template v-slot:body>
{{ title }}
<div class="text-center mb-1 mt-2">
<a :href="previewUrl"><button class="modal-btn btn btn-large">Preview</button></a>
<a :href="downloadUrl"><button class="modal-btn btn btn-large">Download</button></a>
</div>
</template>
</Modal>
DATA
`cards: [
{
title: "Card Title",
subtitle: "Card subtitle",
img: require("#/assets/images/test.jpg"),
previewUrl: "https://test.com",
downloadUrl: "https://test.com"
},`
METHODS:
`methods: {
showModal(card) {
this.isModalVisible = true;
this.title = card.title;
this.img = card.img;
this.previewUrl = card.previewUrl;
this.downloadUrl = card.downloadUrl;
this.isModalVisible = true;
},
closeModal() {
this.isModalVisible = false;
}
}`
The imported modal component
`<template>
<div>
<div class="modal-backdrop" #click.self="close">
<div class="card relative">
<button type="button" class="btn-close" #click="close">
<i class="material-icons">clear</i>
</button>
<header class="modal-header mb-1">
<slot name="header" />
</header>
<div class="mt-1 text-center">
<slot name="header-sub" />
</div>
<slot name="body" />
<footer class="text-center p-2">
<slot name="footer" />
</footer>
</div>
</div>
</div>
</template>
<script>
export default {
name: "modal",
methods: {
close() {
this.$emit("close");
}
}
};
</script>`
you should set the data of modal before and in the click set the correct info
for example in you data set
{
modalInfo:{title:'',img:''}
}
then in click set it like this
showModal(card) {
this.modalInfo.title = card.title;
this.modalInfo.img = card.img;
this.isModalVisible = true;
}
and in the modal part set it like this
<!-- Cards -->
<div class="card-wrapper">
<div v-for="(card, index) in cards" :key="index" class="card">
<div #click="showModal(card)" class="card-body">
<img :src="card.img" alt="resource img" />
<h4 class="card-title">{{ card.title }}</h4>
<h6 class="card-subtitle">{{ card.subtitle }}</h6>
</div>
</div>
</div>
<!-- MODAL -->
<Modal v-show="isModalVisible" #close="closeModal">
<template v-slot:header>{{ modalInfo.img }} </template>
<template v-slot:body>
{{ modalInfo.title }}
<div class="text-center mb-1 mt-2">
<a :href="previewUrl"><button class="modal-btn btn btn-large">Preview</button></a>
I am deleting data from array and trying to update the view but it is not working.
async deleteProduct(e) {
try {
const data = await this.rest.get(environment.apiUrl + `/api/seller/products/delete/?id=${e.target.id}`);
data['success'] ? this.products = (this.products.filter(e => e != (data['products'].id))) : this.data.error(data['message']);
} catch (error) {
this.data.error(error['message']);
}
}
Html:
<section id="myProducts">
<div class="container p-5">
<app-message></app-message>
<div *ngIf="!products" class="m-auto">
<h1 class="text-center display-3 mt-5">
<i class="fa fa-spinner fa-spin"></i>
</h1>
</div>
<h3 *ngIf="products && !products.length" class="display-2 text-center mt-5">My Products is Empty</h3>
<div *ngIf="products && products.length" class="row">
<div class="col">
<h4 class="display-4">My Products</h4>
<div class="row">
<div class="offset-10 col-2 d-none d-md-block">
<p>
<small class="text-muted">Price</small>
</p>
</div>
</div>
<hr class="mt-0">
<div *ngFor="let product of products" class="product">
<div class="row">
<div class="col-4 col-md-2">
<a routerLink="/product/{{ product.id }}">
<img src="{{ product.image }}" alt="image" class="img-fluid img-thumbnail">
</a>
</div>
<div class="col-5 col-md-8">
<h5>
<a routerLink="/product/{{ product.id }}">{{ product.title }}</a>
<p class="m-0">
<small class="text-muted">{{ product.category.name }}</small>
</p>
</h5>
</div>
<div class="col-2">
<h6 class="font-weight-bold text-danger" >{{ product.price | currency : 'INR' }}</h6>
</div>
<div class="col-2">
<button type="button" class="btn btn-info" id="{{product.id}}" (click)="editProduct($event)" [disabled]="btnDisabled">Edit</button>
</div>
<div class="col-2">
<button type="button" class="btn btn-info" id="{{product.id}}" (click)="deleteProduct($event)" [disabled]="btnDisabled">Delete</button>
</div>
</div>
<hr>
</div>
</div>
</div>
</div>
</section>
After deleting the item from array, I am trying to update the object like this:
this.products = (this.products.filter(e => e != (data['products'].id)))
It seems so that your view does not check the changes of your products array.
So I would say trigger it manually:
InjectChangeDetectorRef to trigger change detection manually.
constructor(private cd: ChangeDetectorRef){....}
And in your method call this.cd.detectChanges():
async deleteProduct(e) {
...
data['success'] ? this.products = (this.products.filter(e => e != (data['products'].id))) : this.data.error(data['message']);
this.cd.detectChanges();
...
}
you are comparing e to != e['products'].id ..
it is not true.
i think you should be checking the variable which holds the id in your "e"
which means
e.id != ...or something like so.
I Hope it is working.
In short: I am working on a Bicycle collection app, where I pull an Array of objects from my endpoint to display on a page. I now want to add the functionality of sorting/filtering the bicycles based on year, brand and size when the user selects a field in the dropdown menu. How do I accomplish that inside by component in react?
Similar to this in the browser: /category?year=2000&size=XL&brand=cervelo, I want to do that from my component when a field in the dropdown is selected.
This is my component:
import React, { Component } from 'react'
import actions from '../../actions'
import { Link } from 'react-router'
import { connect } from 'react-redux'
class Category extends Component {
constructor(){
super()
this.state = {
}
}
componentDidMount(){
this.props.getAllBikes()
}
render(){
return(
<div>
<div className="col-xs-12 col-md-2" style={{paddingTop: 0, paddingRight: '70px', left: '5.5%', top: '-4px'}}>
<aside>
<ul className="nav-coupon-category panel">
<li className="all-cat">
<a className="font-14" href="#">Kategorier:</a>
</li>
<li><i className="fa fa-angle-double-right"></i>Tri Cykler
</li>
<li><i className="fa fa-angle-double-right"></i>Racercykler
</li>
<li><i className="fa fa-angle-double-right"></i>Mountainbikes
</li>
<li><i className="fa fa-angle-double-right"></i>Bane Cykler
</li>
<li><i className="fa fa-angle-double-right"></i>Cross Cykler
</li>
<li><i className="fa fa-angle-double-right"></i>Hverdags Cykler
</li>
<li><i className="fa fa-angle-double-right"></i>Vinter Racercykler
</li>
</ul>
</aside>
</div>
<main id="mainContent" className="main-content">
<div className="page-container ptb-60">
<div className="container">
<div className="contact-area contact-area-v1 panel">
<div className="row row-tb-20">
<div style={{paddingBottom: 0}} className="col-xs-12">
<div className="filter-search">
<div className="row">
<div style={{right: '-30px'}} className="col-6 col-md-3 filter-height">
<div className="right-10 pos-tb-center">
<select style={{width: '232%'}} className="form-control input-sm">
<option>Mærke/Brand</option>
<option>Giant</option>
<option>Trek</option>
<option>Specialized</option>
<option>S-Works</option>
<option>Cannondale</option>
<option>Cervelo</option>
<option>Scott</option>
<option>Bianchi</option>
<option>Canyon</option>
<option>Cube</option>
<option>Pinarello</option>
<option>Fuji</option>
<option>Colnago</option>
<option>Felt</option>
<option>Wilier</option>
<option>BH</option>
</select>
</div>
</div>
<div style={{right: '-13px'}} className="col-6 col-md-3 filter-height">
<div className="right-10 pos-tb-center">
<select style={{width: '324%'}} className="form-control input-sm">
<option>Størrelse</option>
<option>50</option>
<option>52</option>
<option>54</option>
<option>56</option>
<option>58</option>
<option>60</option>
<option>62</option>
</select>
</div>
</div>
<div className="col-6 col-md-3 filter-height">
<div style={{right: '13px'}} className="col-6 col-md-3 filter-height">
<div className="right-10 pos-tb-center">
<select style={{width: '490%'}} className="form-control input-sm">
<option>Årgang</option>
<option>Før</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
</select>
</div>
</div>
</div>
<div className="col-6 col-md-3 filter-height">
<div style={{right: '31px'}} className="col-6 col-md-3 filter-height">
<div className="right-10 pos-tb-center">
<select style={{width: '494%'}} className="form-control input-sm">
<option>Sorter Efter</option>
<option>Nyeste</option>
<option>Pris: Lav til Høj</option>
<option>Pris: Høj til Lav</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="ptb-30 prl-30">
<div className="row row-tb-20">
{(this.props.category == null) ? null :
this.props.category.map((bike, i) => {
return (
<div key={i} className="col-sm-6 col-md-4 col-lg-3">
<div className="coupon-single panel t-center salg-shadow">
<div className="row">
<div className="col-xs-12">
<div className="text-center p-20">
<a href="#">
<img src={bike.attachments[0]}/>
</a>
</div>
</div>
<div style={{maxHeight: '220px', minHeight: '220px'}} className="col-xs-12">
<div className="panel-body">
<ul className="deal-meta list-inline mb-10">
<li style={{textTransform: 'capitalize'}} className="color-muted"><i className="ico fa fa-tag mr-5"></i>{bike.brand}</li>
<li className="color-muted"><i className="ico fa fa-cube mr-5"></i>{bike.size}</li>
<li className="color-muted"><i className="ico fa fa-thumb-tack mr-5"></i>{bike.year}</li>
</ul>
<h4 className="color-green mb-10 t-uppercase">DKK {bike.price}.00</h4>
<h5 className="deal-title mb-10">
{bike.title}
</h5>
<ul className="deal-meta list-inline mb-10">
<li style={{textTransform: 'capitalize'}} className="color-muted"><i className="ico fa fa-map-marker mr-5"></i>{bike.location}</li>
<br/>
<li className="color-muted"><i className="ico fa fa-user-circle mr-5"></i>{bike.name}</li>
</ul>
<div className="showcode">
<button className="btn btn-sm btn block more-info">Vis Mere</button>
<button className="btn btn-sm btn block more-info">Kontakt Info</button>
</div>
</div>
</div>
</div>
</div>
</div>
)
})
}
</div>
</div>
</div>
</div>
</div>
</main>
</div>
)
}
}
const stateToProps = (state) => {
return {
category: state.category.allBikes
}
}
const dispatchToProps = (dispatch) => {
return {
getAllBikes: (bike) => dispatch(actions.getAllBikes(bike))
}
}
export default connect(stateToProps, dispatchToProps)(Category)
If you are using React Router v3 or v2, you can access the query string params from the location.query object that passed to your component.
For example:
<Route path="category" component={Category} />
And then in your Category component, you can do this.props.location.query.year etc...
EDIT
Forgot to mention that react router v4 doesnt support this. you can read about other solution here
EDIT #2
Following you other question in comments:
Given the url you posted:
localhost:3000/category?year=2000&size=XL&brand=cervelo
By accesing this.props.location.query.year will return 2000
and this.props.location.query.brand will return cervelo and so on...