Cannot mix a URL string with props in ReactJS - reactjs

Question

i am new on ReactJS and i am trying to find the correct way to mix a props of a parent component with a normal string URL
in my Child component i have two props in my child component:
this.props.originalUrl = https://server.com
this.props.todayDate = "2018-08-16"
and i have a url lets say it is
let url = https://server.com/123/2018-08-16/blabla
what i want is to make it dynamic url like
let url = `${this.props.originalUrl }/123/${this.props.todayDate }/blabla`
But when i use
let url = `${this.props.originalUrl }/123/2018-08-16/blabla`
The console give me the correct URL that i want
https://server.com/123/2018-08-16/blabla
but with two props like this
let url = `${this.props.originalUrl }/123/${this.props.todayDate}/blabla`
the console give me
https://server.com/123//blabla without the date
How can i mix them currently ??
Note: when i use {this.props.todayDate} in the Child componenet return it is look work and rendered as 2018-08-16
this is the full code
import React, { Component } from 'react';
import { extend } from 'underscore';
import { translate, Trans} from 'react-i18next';
import axios from 'axios';
import { Alert } from 'react-alert'
import TableNav from './tableNav';
import Table from './table';
class TableContainer extends Component {
constructor(props) {
super(props);
this.state = {
sortBy: 'id',
filteredData: [],
checkedboxArray: [],
sortingOptions: [
'id'],
sortingDirection: {
'id': true,
},
data: [],
itemsPerPage: 20,
totalPages: '',
firstUrl: '',
previousUrl: '',
currentUrl: '',
nextUrl: '',
lastUrl: '',
totalItems:'',
currentPageNumber: '',
originalurl: `${this.props.cmsUrl}performances?eq(flyers.id,empty())&gte(startDateTime,${this.props.todayDate})&sort(+startDateTime)`,
performancesSelected: [],
myItemsState: true
};
let url = this.state.originalurl;
axios.get(url, { withCredentials: true })
.then((response) => {
this.setState({
totalPages:response.data.pagination.pages,
totalItems:response.data.pagination.total,
currentPageNumber: response.data.pagination.page,
firstUrl:response.data.pagination.links.first,
previousUrl:response.data.pagination.links.previous,
currentUrl:response.data.pagination.links.current,
nextUrl:response.data.pagination.links.next,
lastUrl:response.data.pagination.links.last,
data:response.data.results,
});
});
this.getTotal = this.getTotal.bind(this);
this.onSelectChange = this.onSelectChange.bind(this);
this.onColumnClick = this.onColumnClick.bind(this);
this.filterData = this.filterData.bind(this);
this.sortData = this.sortData.bind(this);
this.checkedbox = this.checkedbox.bind(this);
this.nextPageFunc = this.nextPageFunc.bind(this);
this.previousPageFunc = this.previousPageFunc.bind(this);
this.firstpageFunc = this.firstpageFunc.bind(this);
this.lastpageFunc = this.lastpageFunc.bind(this);
}
getTotal() {
return this.state.data.length;
}
onSelectChange(e, option) {
if (option === 'sortBy') {
this.setState({ sortBy: e.target.value });
this.sortData(e.target.value, this.state.sortBy);
this.setState({ currentPage: 1});
} else {
this.setState({ itemsPerPage: e.target.value });
this.setState({ currentPage: 1});
}
}
onColumnClick(e) {
var clicked = e.target.getAttribute('class');
this.setState({ sortBy: clicked });
this.sortData(clicked, this.state.sortBy);
}
filterData() {
return this.state.data;
}
sortData(sortBy, previousSortBy) {
sortBy = sortBy.toLowerCase().replace(' ', '');
previousSortBy = previousSortBy.toLowerCase().replace(' ', '');
var ascending = this.state.sortingDirection[sortBy];
if (sortBy === previousSortBy) {
ascending = !ascending;
this.setState({ sortingDirection: extend(this.state.sortingDirection, { [sortBy]: ascending }) });
}
var data = this.state.data.sort(function(a, b) {
if(a[sortBy] < b[sortBy]) {
return ascending ? -1 : 1;
}
if(a[sortBy] > b[sortBy]) {
return ascending ? 1 : -1;
}
return 0;
});
this.setState({ data })
}
checkedbox(id){
let checkedboxArray = this.state.checkedboxArray;
let flyersAraay = this.state.data;
let performancesSelected = this.state.performancesSelected;
// if Selected ID are not in the checkedboxArray
if ( checkedboxArray.indexOf(id) === -1 ) {
checkedboxArray.push(id) ;
this.setState({checkedboxArray: checkedboxArray })
let selecObject = flyersAraay.find(function (xxx) { return xxx.id === id; });
performancesSelected.push(selecObject)
let data = JSON.stringify(performancesSelected)
sessionStorage.setItem( "Performances" , data)
}
// if Selected ID are in the checkedboxArray
else if ( checkedboxArray.indexOf(id) !== -1 ) {
let i = checkedboxArray.indexOf(id);
if (i !== -1) {
checkedboxArray.splice(i, 1);
performancesSelected.splice(i, 1);
this.setState({checkedboxArray: checkedboxArray })
let data = JSON.stringify(performancesSelected)
sessionStorage.setItem( "Performances" , data)
}
}
}
nextPageFunc() {
let StrUrl = JSON.stringify(this.state.nextUrl);
let smallUrl = StrUrl.split("external/").pop();
let editeUrl = this.props.cmsUrl + smallUrl;
let url = editeUrl;
axios.get(url, { withCredentials: true })
.then((response) => {
this.setState({
totalPages: response.data.pagination.pages,
totalItems: response.data.pagination.total,
currentPageNumber: response.data.pagination.page,
firstUrl: response.data.pagination.links.first,
previousUrl: response.data.pagination.links.previous,
currentUrl: response.data.pagination.links.current,
nextUrl: response.data.pagination.links.next,
lastUrl: response.data.pagination.links.last,
data: response.data.results,
});
});
}
previousPageFunc() {
let StrUrl = JSON.stringify(this.state.previousUrl);
let restUrl = StrUrl.split("external/").pop();
let editeUrl = this.props.cmsUrl + restUrl;
let url = editeUrl;
axios.get(url, { withCredentials: true })
.then((response) => {
this.setState({
totalPages: response.data.pagination.pages,
totalItems: response.data.pagination.total,
currentPageNumber: response.data.pagination.page,
firstUrl: response.data.pagination.links.first,
previousUrl: response.data.pagination.links.previous,
currentUrl: response.data.pagination.links.current,
nextUrl: response.data.pagination.links.next,
lastUrl: response.data.pagination.links.last,
data: response.data.results,
});
});
}
firstpageFunc() {
let StrUrl = JSON.stringify(this.state.firstUrl);
let restUrl = StrUrl.split("external/").pop();
let editeUrl = this.props.cmsUrl + restUrl;
let url = editeUrl;
axios.get(url, { withCredentials: true })
.then((response) => {
this.setState({
totalPages: response.data.pagination.pages,
totalItems: response.data.pagination.total,
currentPageNumber: response.data.pagination.page,
firstUrl: response.data.pagination.links.first,
previousUrl: response.data.pagination.links.previous,
currentUrl: response.data.pagination.links.current,
nextUrl: response.data.pagination.links.next,
lastUrl: response.data.pagination.links.last,
data: response.data.results,
});
});
}
lastpageFunc() {
let StrUrl = JSON.stringify(this.state.lastUrl);
let smallUrl = StrUrl.split("external/").pop();
let editeUrl = this.props.cmsUrl + smallUrl;
let url = editeUrl;
axios.get(url, { withCredentials: true })
.then((response) => {
this.setState({
totalPages: response.data.pagination.pages,
totalItems: response.data.pagination.total,
currentPageNumber: response.data.pagination.page,
firstUrl: response.data.pagination.links.first,
previousUrl: response.data.pagination.links.previous,
currentUrl: response.data.pagination.links.current,
nextUrl: response.data.pagination.links.next,
lastUrl: response.data.pagination.links.last,
data: response.data.results,
});
});
}
myItemsCheckbox(e) {
let state = this.state.myItemsState
if ( state === false ) {
axios.get( `${this.props.cmsUrl}performances?eq(flyers.id,empty())&gte(startDateTime,2018-08-16)&sort(+startDateTime)`, { withCredentials: true })
.then((response) => {
this.setState({
totalPages:response.data.pagination.pages,
totalItems:response.data.pagination.total,
currentPageNumber: response.data.pagination.page,
firstUrl:response.data.pagination.links.first,
previousUrl:response.data.pagination.links.previous,
currentUrl:response.data.pagination.links.current,
nextUrl:response.data.pagination.links.next,
lastUrl:response.data.pagination.links.last,
data:response.data.results,
});
});
this.setState({ myItemsState: true})
}
else if ( state === true ) {
axios.get( this.props.cmsUrl+"performances", { withCredentials: true })
.then((response) => {
this.setState({
totalPages:response.data.pagination.pages,
totalItems:response.data.pagination.total,
currentPageNumber: response.data.pagination.page,
firstUrl:response.data.pagination.links.first,
previousUrl:response.data.pagination.links.previous,
currentUrl:response.data.pagination.links.current,
nextUrl:response.data.pagination.links.next,
lastUrl:response.data.pagination.links.last,
data:response.data.results,
});
});
this.setState({ myItemsState: false })
}
}
render() {
const { itemsPerPage, totalPages, data, currentPageNumber, totalItems, firstUrl, previousUrl, currentUrl, nextUrl, lastUrl, checkedboxArray } = this.state;
return (
<div>
<div className="myItemsButton">
<Alert>{ alert => (
<span className="btn myItemsSpan ">
<input
className="inputSelect"
defaultChecked={this.state.myItemsState}
onChange={ () => { { alert.show('You have changed the Items order' )} ; this.myItemsCheckbox() } }
type="checkbox"
id="xd"
name="cc"
/>
<label htmlFor="xd"><span></span></label>
myItems
</span>
)}
</Alert>
</div>
<TableNav
itemsPerPage={itemsPerPage}
totalPages={totalPages}
data={data}
currentPageNumber={currentPageNumber}
totalItems={totalItems}
firstpageFunc={this.firstpageFunc}
previousPageFunc={this.previousPageFunc}
nextPageFunc={this.nextPageFunc}
lastpageFunc={this.lastpageFunc}
firstUrl={firstUrl}
previousUrl={previousUrl}
currentUrl={currentUrl}
nextUrl={nextUrl}
lastUrl={lastUrl} />
<Table
onColumnClick={this.onColumnClick}
checkedbox={this.checkedbox}
data={data}
checkedboxArray={checkedboxArray}
filteredData={this.filterData()} />
{ this.state.data.length === 0 && (
<table className="table noResultsTable bordered table-hover table-dark">
<tbody>
<tr>
<td>
<div className="col-12 text-center noResults">
{/* <i className="fas fa-cog"></i> */}
<i className="fa fa-exclamation-triangle"></i>
<span className="resultsText"><Trans>No results found</Trans> {this.props.todayDate} ...</span>
</div>
</td>
</tr>
</tbody>
</table>
)}
</div>
);
}
}
export default translate('translations')(TableContainer);
in the last <span className="resultsText">i can read the time as