Click on Link to show details of item - ReactJs, Node.js

Question

App is running on Node.js and React. In database (mongodb used) I have collection Rooms that contains details about particular room.

On LandingPage I display some of room details and to se more person has to click on View link.

LandingPage.js

const Room = props => (

    <div className = "col-md-4" >
        <div className="card mb-4 shadow-sm">
            <img src={props.room.imageData} class="card-img-top" alt="..." width="100%" height="225" />
            <div className="card-body">
                <h5 class="card-title">{props.room.title}</h5>
                <p className="card-text">{props.room.description}</p>
                <div className="d-flex justify-content-between align-items-center">
                    <div className="btn-group">
                    <Link  className="btn btn-sm btn-outline-secondary" to={"/view/"+props.room._id}>View</Link>
                    </div>
                </div>
            </div>
        </div>
    </div >
)

Link is sending me to view page

<Link  className="btn btn-sm btn-outline-secondary" to={"/view/"+props.room._id}>View</Link>

But I am not sure how would I display now all details of room from database?

View.js

export default class RoomsAdmin extends React.Component {

    constructor(props) {
        super(props);
        this.state = { rooms: [] };
    }

    componentDidMount() {
        axios.get('http://localhost:3090/admin/')
            .then(response => {
                this.setState({
                    rooms: response.data
                })
                    .catch(function (error) {
                        console.log(error);
                    })
            })
    }

    roomList() {
        return this.state.rooms.map(function (currentRoom, i) {
            return <Room room={currentRoom} key={i} />
        });
    }
    render() {
        console.log(this.props);
        return (
            <div>
                <div className="album py-5 bg-light">
                    <div className="container">
                        <div className="row">
                            <div className="col-md-4">
                                <div className="card mb-4 shadow-sm">
                                    <img src={props.room.imageData} className="card-img-top" alt="..." width="100%" height="225" />
                                    <div className="card-body">
                                        <h5 class="card-title">{props.room.title}</h5>
                                        <p className="card-text">{props.room.description}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

I came up with this code for now but I am getting following error:

Uncaught ReferenceError: props is not defined

Answer 1

Yes because you are writing props not this.props in your image tag. In RoomAdmin Component

<img src={props.room.imageData} className="..../>

Use this instead

<img src={this.props.room.imageData} className=".../>