RSVP Birthday party

I’m stuck with the assignment. I’m doing React.js for a birthday party. Here are the questions. The HTML and JavaScript.

The program below is a React.js application that allows users to RSVP to a birthday party. Complete the application by doing the following:

  • In the body of the Reserve component, use the hook useState to define a state setter constant called setReserved and a state constant called reserved, initialized to false.
  • Change the reserved state on the “RSVP Now!” button click. Toggle the state of reserved (truefalse or falsetrue) in the body of reserveEvent().
  • Inside Reserve‘s return statement, render the eventName prop as an <h2> element. The prop is being passed in from the parent App component.
  • Inside Reserve‘s return statement, show <p>You're set! See you there!</p> when the reserved state is true.

If the code runs successfully, you should see a button labeled “RSVP Now!” for “Codey’s” birthday party.

< !DOCTYPE html>< head >
< meta charset=“UTF-8”/ >
< meta name=“viewport” content=“width=device-width, initial-scale=1.0”/>
< link rel=“stylesheet” href=“styles.css”/ >
< /head>
< body>
< main id=“app”>
< /main>
< script src=“”>< /script>
< script src=“index.compiled.js”>< /script>

< script type=“text/javascript” src=“”>< /body>< /html>

Note: Make sure you backspace the arrows (< >).

import React, { useState } from ‘react’;

function Reserve(props){

// Create a state constant and set the initial state to false
const [reserved, setReserved] = useState(false);

function reserveEvent(){
// Set reserved state to newReservation


  <div className='Reserve'>
    {/* Set H2 text to be eventName prop */}
    <h2>The Oasis</h2>
    <button onClick={reserved}>
      RSVP Now!
    {"REPLACE ME" && (
        <p>You're set! See you there!</p>


export default Reserve;

Yo lo resolví así:
Dentro de la funcion reserveEvent() - setReserved(condicion => !condicion)
En la h2 etiqueta - {props.eventName}
Para mostrar la p etiqueta - {{reserveEvent} && …