Hi, I noticed that you are using React 18 but you aren't using the new createRoot api you need to change that in order to use React 18 features.

Here's the code

// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App tab="home" />);

Reference How to Upgrade to React 18

• Add Wikipedia links to the name of the mission as an anchor.
• Add Wikipedia links to the name of the dragons as an anchor.
• Add Wikipedia links to the name of the rockets as an anchor.

Description

This project was compiled by a two-people team in the making of the Space-Traveller Application. In this project we:

• [x] Used the SpaceX API provided to fetch for data for the Rockets and mission page
• [x] Added reserved Rockets and booked Missions in the Profile page
• [x] Wrote reducers for both the Rockets and Mission components
• [x] Added Reserved badge when a user clicked on the reserve rocket button
• [x] Indicated whether a mission was booked or not
• [x] Dynamically updated the Profile page whenever a Rocket and a mission were booked
• [x] Launched the site using Heroku. check the live link here

Project Requirements

config & basic setup

• Create React App.
• Install React-Redux, Redux Logger and React Routers
• Download the free image for the App logo
• Create routes and view components (Rockets, Missions, My Profile, Dragons [only if your team has 3 members]). Use <NavLink /> for the page navigation links and style active class to indicate which section/page user is currently on (underline active navigation link).
• Create directories for all Redux state slice files (rockets, missions, dragons [only if your team has 3 members]).

Redux: Fetch data and update Redux Store

• upon fist render fetch data from the SpaceX API endpoints
  • Rockets: https://api.spacexdata.com/v3/rockets
  • Missions: https://api.spacexdata.com/v3/miss

Thank you for taking the time to review this Pull Request

• dispatch 'leave' action to the store after the user clicked on 'leave Mission'.
• Add or change the reserved key to false.
• Update the button to 'Leave Mission'.

@daudi13, This is a base code for the My Profile section, that will need to finish the last task by displaying the missions and rockets inside it, Please review it, and approve it ASAP, so we can use it as a template.

in this part of the project, I:

• refactored my code to make the store render only once.
• Updated the rendering method to the new client rendering method
• refactored the rocketReducer() function to become more optimised.

In this part of the project, i:

• Removed the hard-coded array and replaced it with rocket data from store
• Added props from rocketData
• fixed typo causing error

in this part of the project I:

• Added Store folders and rocket action file using the feature folder approach
• Added async function for Rocket API to fetch Rocket data,
• Added configuration for the configureStore.js
• Linked the store to the App
• Added the reducer actions for the Rocket
• Added a rocketReducer function

In this project, I:

• Added class active to nav links to highlight which page a user is on
• Added responsiveness to the navbar
• Added responsiveness to the navlinks
• Fixed the proptype issue from the previous PR

In this branch I:

• Created a rocket page
• temporarily disabled the navbar
• Styled the page using a mobile first approach
• Added items dynamically

I have commented out the navbar on this branch because it wasn't connected to the routers I'll fix it in the next branch seeing already you have installed routers in your last pull request

• When a user clicks the "Join Mission" button, action needs to be dispatched to update the store. You need to get the ID of the selected mission and update the state. Remember you mustn't mutate the state. Instead, you need to return a new state object with all missions, but the selected mission will have an extra key reserved with its value set to true. You could use a JS filter() or map() to set the value of the new state - i.e.:

const newState = state.map(rocket => {
    if(mission.id !== id) 
        return mission;
    return { ...mission, reserved: true };
});

• Regardless of which method you choose, make sure you place all your logic in the reducer. In the React view file, you should only dispatch the action with the correct rocket ID as an argument.