Conference selection

src/Schedule.jsx

@@ -0,0 +1,13 @@
+import PropTypes from 'prop-types';
+
+export default function Schedule({
+    conferenceId,
+}) {
+    return (<>
+        conference id: {conferenceId}
+    </>);
+}
+
+Schedule.propTypes = {
+    conferenceId: PropTypes.string.isRequired,
+};

src/ScheduleLoader.jsx

@@ -1,4 +1,6 @@
 import useConferences from './hooks/useConferences.js';
+import { useState } from 'react';
+import Schedule from './Schedule.jsx';
 
 export default function ScheduleLoader() {
     const {
@@ -7,15 +9,20 @@ export default function ScheduleLoader() {
         isLoading,
     } = useConferences();
 
+    const [ conferenceId, setConferenceId ] = useState();
+
     return (<>
         {isLoading && <p>Please wait...</p>}
         {error && <p>Error: {error}</p>}
         {conferences && <>
             <label>Select a conference</label>
-            <select>
+            <select onChange={e => setConferenceId(e.target.value)}>
                 {conferences.map(conference => <option key={conference.id}
                                                        value={conference.id}>{conference.title}</option>)}
             </select>
         </>}
+        {conferenceId && <div>
+            <Schedule conferenceId={conferenceId} />
+        </div>}
     </>);
 }