happy 2022! I'm working on adding an onClick event listener/button. This app it's an Airbnb clone, and I'm working on the SingleRoom page, which displays details about that specific room/home. Once the user clicks to a particular place, it will redirect to the SingleRoom page (below code) it has a "Reserve now" button so the user can pay for the room/home.
When I try adding the button, I get this error: Uncaught Error: SingleRoom(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
The reserve button will open a modal to either cancel or continue to make the payment.
Would you please help me in making the code work? Thank you
Updated the code.. It now has the else statement But it throws this error: Line 29:15: 'setOpenModal' is not defined no-undef
import React, { Component } from "react";
import defaultBcg from "../images/room-1.jpeg";
import Banner from "../components/Banner";
import { Link } from "react-router-dom";
import { RoomContext } from "../context";
import StyledHero from "../components/StyledHero";
import "../components/Modal.css";
export default class SingleRoom extends Component {
constructor(props) {
super(props);
this.state = { slug: this.props.match.params.slug, defaultBcg };
}
static contextType = RoomContext;
render() {
const { getRoom } = this.context;
const room = getRoom(this.state.slug);
if (!room) {
return (
<div className="error">
<h3>Sorry we couldn't find the room you were looking for'...</h3>
<Link to="/rooms" className="btn-primary">
Back to rooms
</Link>
</div>
);
}else{
Modal(setOpenModal);
}
function Modal({ setOpenModal }) {
const {
name,
description,
capacity,
size,
price,
extras,
breakfast,
pets,
images,
} = room;
const [mainImg, ...defaultImg] = images;
return (
<>
<StyledHero img={mainImg || this.state.defaultBcg}>
<Banner title={`${name}`}></Banner>
</StyledHero>
<section className="single-room">
<div className="single-room-images">
{defaultImg.map((item, index) => {
return <img key={index} src={item} alt={name} />;
})}
</div>
<div className="single-room-info">
<article className="desc">
<h3>details</h3>
<p>{description}</p>
</article>
<article className="info">
<h3>Info</h3>
<h6>Price: ${price}</h6>
<h6>Size: ${size} SQFT</h6>
<h6>
Max capacity: {""}
{capacity > 1 ? `${capacity} people` : `${capacity} person`}
</h6>
<h6>{pets ? "pets allowed" : "no pets allowed"}</h6>
<h6>{breakfast && "free breakfast included"}</h6>
<div className="modalBackground">
<div className="modalContainer">
<div className="titleCloseBtn">
<button
onClick={() => {
setOpenModal(false);
}}
>
X
</button>
</div>
<div className="title">
<h1>Reservation details</h1>
</div>
<div className="body">
<p>
Total amount {{price}}
</p>
</div>
<div className="footer">
<button
onClick={() => {
setOpenModal(false);
}}
id="cancelBtn"
>
Cancel
</button>
<button>Reserve Now</button>
</div>
</div>
</div>
</article>
</div>
</section>
<section className="room-extras">
<h6>extras</h6>
<ul className="extras">
{extras.map((item, index) => {
return <li key={index}>- {item}</li>;
})}
</ul>
</section>
</>
);
}
}
}
Because there is no else condition found. Change your code to