4. สร้างไฟล์ชื่อ Detail.js ในโฟลเดอร์ src เพื่อเป็นหน้าที่ใช้แสดงรายละเอียดของแต่ละรายการ และในไฟล์ src/Detail.js ที่สร้างให้เขียนโค้ดดังนี้

import { React, Component } from "react";
import './re_ws_07_main.css';

class DetailPage extends Component {
    constructor(props) {
        super(props);
        this.state = {real_estate: [],
            showImage: [true,false,false,false,false]};
    }

    componentDidMount() {
        var item_id = this.props.location.search.substring(4);
        var cors_api_host = 'https://cors-anywhere.herokuapp.com/';
        fetch(cors_api_host + 'expert-programming-tutor.com/Downloads/w721/property_detail.php?id=' + item_id)
        .then(response => response.json())
        .then(response => this.setState({real_estate: response}))
        .catch(error => console.log(error));
    }

    showSlides = (n) => {
        let show = [false,false,false,false,false];
        show[n] = true;
        this.setState({showImage: show});
    }

    render(){
        return (
        <div>
            <section className="card2">
            <div className="slideshow-container">
  <div className="mySlides fade" style={{display: this.state.showImage[0] ? 'block' : 'none' }}>
                <img src={this.state.real_estate.image_01} alt="x" /></div>
  <div className="mySlides fade" style={{display: this.state.showImage[1] ? 'block' : 'none' }}>
                <img src={this.state.real_estate.image_02} alt="x" /></div>
  <div className="mySlides fade" style={{display: this.state.showImage[2] ? 'block' : 'none' }}>
                <img src={this.state.real_estate.image_03} alt="x" /></div>
  <div className="mySlides fade" style={{display: this.state.showImage[3] ? 'block' : 'none' }}>
                <img src={this.state.real_estate.image_04} alt="x" /></div>
  <div className="mySlides fade" style={{display: this.state.showImage[4] ? 'block' : 'none' }}>
                <img src={this.state.real_estate.image_05} alt="x" /></div>
            </div><br />
            <div style={{textAlign:"center"}}>
                <span className="dot" onClick={() => this.showSlides(0)}>
                <img src={this.state.real_estate.image_01} alt="x" /></span>
                <span className="dot" onClick={() => this.showSlides(1)}>
                <img src={this.state.real_estate.image_02} alt="x" /></span>
                <span className="dot" onClick={() => this.showSlides(2)}>
                <img src={this.state.real_estate.image_03} alt="x" /></span>
                <span className="dot" onClick={() => this.showSlides(3)}>
                <img src={this.state.real_estate.image_04} alt="x" /></span>
                <span className="dot" onClick={() => this.showSlides(4)}>
                <img src={this.state.real_estate.image_05} alt="x" /></span>
            </div>
            <p><b>REAL ESTATE NAME:</b> {this.state.real_estate.real_estate_name}<br />
            <b>LOCATION:</b> {this.state.real_estate.LOCATION}<br />
            <b>LATITUDE:</b> {this.state.real_estate.lat}<br />
            <b>LONGITUDE:</b> {this.state.real_estate.lon}<br />
            <b>TYPE:</b> {this.state.real_estate.property_type}</p><hr />
            <p><b>TRANSACTION:</b> {this.state.real_estate.TRANSACTION}<br />
            <b>SALE TERMS:</b> {this.state.real_estate.SALE_TERMS}<br />
            <b>SALE PRICE:</b> {this.state.real_estate.SALE_PRICE} BAHT<br />
            <b>RENT PRICE:</b> {this.state.real_estate.RENT_PRICE} BAHT<br />
            <b>COMMON CHARGES:</b> {this.state.real_estate.COMMON_CHARGES} BAHT</p><hr />
            <p><b>LAND AREA:</b> {this.state.real_estate.LAND_AREA} SQ.WAH<br />
            <b>UNIT SIZE:</b> {this.state.real_estate.UNIT_SIZE} SQ.M<br />
            <b>DECORATION STYLE:</b> {this.state.real_estate.DECORATION_STYLE}<br />
            <b>NUMBER OF BEDROOMS:</b> {this.state.real_estate.BEDROOMS}<br />
            <b>NUMBER OF BATHROOMS:</b> {this.state.real_estate.BATHROOMS}<br />
            <b>DIRECTION OF ROOM:</b> {this.state.real_estate.DIRECTION_OF_ROOM}</p><hr />
            <p><b>INROOM FACILITIES:</b> {this.state.real_estate.INROOM_FACILITIES}<br />
            <b>PUBLIC FACILITIES:</b> {this.state.real_estate.PUBLIC_FACILITIES}</p><hr />
            <p><b>CONTACT:</b> 085-350-7540 | 084-8800-255 | ntprintf@gmail.com</p>
          </section>
        </div>
        );
    }
}
export default DetailPage;

5. เปิดไฟล์ src/App.js ที่อยู่ในโฟลเดอร์แอปพลิเคชันด้วย Text editor แล้วแก้โค้ดเป็นดังต่อไปนี้ ซึ่งเป็นการเพิ่ม Main component และ Detail component พร้อมทั้ง route path ของแต่ละหน้า

import { React, Fragment } from "react";
import { Switch, Route} from 'react-router-dom';
import Main from "./Main";
import Detail from "./Detail";

const App = () => (
<Fragment>
	<header>
		<h1>EPT Real Estate</h1>
	</header>

	<Switch>
		<Route exact path='/' component={Main}></Route>
		<Route exact path='/detail' component={Detail}></Route>
	</Switch>
</Fragment>
);
export default App;

6. หลังจากบันทึกไฟล์เรียบร้อยแล้ว ให้พิมพ์คำสั่ง npm start เพื่อทดสอบการทำงานของแอปที่สร้าง แล้วไปที่หน้าเว็บ http://localhost:3000 ถ้าทุกอย่างถูกต้องจะเห็นหน้าเว็บแสดงข้อมูลอสังหาริมทรัพย์ทั้งหมด และสามารถกดเข้าไปดูรายละเอียดของแต่ละรายการได้ดังภาพ