31
rated 0 times
[
34]
[
3]
/ answers: 1 / hits: 14995
/ 4 Years ago, wed, june 17, 2020, 12:00:00
I have the following code:
import React, { Component } from 'react';
import '../styles/CountryDetails.css';
import { Link } from 'react-router-dom';
import { IconContext } from 'react-icons';
import { GoArrowRight } from 'react-icons/go';
import { FaPlane } from 'react-icons/fa';
class CountryDetails extends Component {
constructor(props) {
super(props);
this.state = {
countryData: props.countryData
}
}
render() {
console.log(this.state.countryData);
return (
<div>
<h1 className=display-3 text-center my-5>{this.state.countryData.countryClassification}</h1>
<div className=CountryDetail>
<div className=cards shadow-1 container>
<div className=row vertical-align>
<div className=col-2 text-center>
<IconContext.Provider value={{ color: '#A9A9A9', className: 'icon-hover icon-size'}}>
<div>
<FaPlane />
</div>
</IconContext.Provider>
</div>
<div className=col-8>
<h4>Airfare | Car Rental | Hotel Booking Site</h4>
{this.state.countryData.topAirfareCarRentalHotelBookingSite1 ? null : <span className=category-status>Under Construction...</span>}
</div>
<div className=col-2 text-center>
<IconContext.Provider value={{ className: 'show-hover icon-arrow-size'}}>
<div>
<GoArrowRight />
</div>
</IconContext.Provider>
</div>
</div>
<Link to={`/country/${this.state.countryData.countryAndTerriority}/topAirfareCarRentalHotelBookingSite1`} />
</div>
</div>
</div>
)
}
}
export default CountryDetails;This is what I get:
Right now, my URL link is showing http://localhost:8080/country/Afghanistan/. When I click on the rectangle box, I expect my URL link to update to http://localhost:8080/country/Afghanistan/topAirfareCarRentalHotelBookingSite1 and it will show up a different component.
For some reason, I cannot make this div clickable and the URL does not change when I click on it. Am I using this code
<Link to={`/country/${this.state.countryData.countryAndTerriority}/topAirfareCarRentalHotelBookingSite1`} />
wrong or putting it in the wrong place?
More From » html
