Can I pass an Array around into multiple Classes?

I very much dislike code #2. I don't like that it takes raw data as an argument rather than taking another class/interface (which would be dependency injection). I really don't like that it mutates the variable which is passed into the constructor by calling push on the arrayOfJourneys.

I'm also seeing issues with your keypress handler. This calls a journeys.sortJourneys() method which mutates the array of journeys, but will it cause your UI to display them in the new order? Probably not.

my classes will all be verbs such as AddJourney or AddToExistingJourney or sortJourney. I have also read Classes should be Nouns and its behaviours should be the Verbs. I am not sure how important this is.

I would not break this convention. If adding a new journey involves a lot of logic then you could consider a JourneyCreator class. But AddJourney is not a good class.

Mimicking backend code on the front-end

When I am designing front-end code that is a placeholder for backend code I like to mimic the sort of functionality that I would expect to eventually have in the backend. I would create a FakeDb class with methods getJourneyById, getJourneysList, addNewJourney, updateJourney, etc. When you think about it in those terms it might become more clear where to put certain logic.

Your goal is to design this is a way where swapping out your front-end data storage for backend storage involves changing as few pieces as possible. You can have a FakeDb and a RealDbWrapper that conform to the same interface, and simply substitute one for the other.

Here's an example of how a stand-in for an API might look. I'm using lodash orderBy which is a super helpful function for sorting arrays of objects.

I first wrote this TypeScript, React-safe (no mutations) version because that's what I normally write:

import { nanoid } from 'nanoid';
import { keyBy, orderBy, omit } from 'lodash';

interface DbAddedFields {
    _id: string;
    dateCreated: string;
    dateModified: string;
}

interface JourneyUpdate {
    text: string;
    date: string;
}

interface JourneyData {
    name: string;
    subject: string;
    description?: string;
    updates: JourneyUpdate[];
}

type DbVersion<T> = T & DbAddedFields;
type NonDbVersion<T> = Omit<T, keyof DbAddedFields>;

class FakeDbTable<Datum> {
    private ids: string[] = [];
    private itemsById: Record<string, DbVersion<Datum>> = {};

    constructor(items: DbVersion<Datum>[] = []) {
        this.ids = items.map(item => item._id);
        this.itemsById = keyBy(items, '_id');
    }
    getIds(): string[] {
        return this.ids;
    }
    getById(id: string): DbVersion<Datum> {
        return this.itemsById[id];
    }
    getList(): DbVersion<Datum>[] {
        return this.getIds().map(id => this.getById(id));
    }
    add(item: Datum): DbVersion<Datum> {
        const _id = nanoid();
        const dateCreated = new Date().toLocaleString();
        const dbVersion: DbVersion<Datum> = {
            ...item,
            _id,
            dateCreated,
            dateModified: dateCreated
        }
        this.ids = this.getIds().concat(_id);
        this.itemsById = {
            ...this.itemsById,
            [_id]: dbVersion
        };
        return dbVersion;
    }
    delete(id: string): void {
        this.ids = this.getIds().filter(itemId => itemId !== id);
        this.itemsById = omit(this.itemsById, id);
    }
    update(id: string, patch: Partial<Datum>): DbVersion<Datum> {
        const existing = this.getById(id);
        const merged = {
            ...existing,
            ...patch,
            dateModified: new Date().toLocaleString()
        };
        this.itemsById = {
            ...this.itemsById,
            [id]: merged
        };
        return merged;
    }
}

class JourneyCollection {
    private data: FakeDbTable<JourneyData>;

  constructor(journeyArr: DbVersion<JourneyData>[] = []) {
    this.data = new FakeDbTable<JourneyData>(journeyArr);
  }

  addJourney(name: string, subject: string) {
    this.data.add({ name, subject, updates: [], description: '' });
  }

  getSortedJourneys(field: keyof DbVersion<JourneyData>, order: 'desc' | 'asc') {
    return orderBy(this.data.getList(), field, order);
  }

  getJourneysBySubject(subject: string) {
    return this.data.getList().filter(journey => journey.subject === subject);
  }
}

const journeys = new JourneyCollection();

TypeScript playground link

But I think this JS version is more how you were thinking:

import { nanoid } from 'nanoid';
import { orderBy } from 'lodash';

class Journey {
    constructor(name, subject, dateCreated = new Date().toLocaleString()) {
        this.name = name;
        this.subject = subject;
        this.description = '';
        this.updates = [];
        this._id = nanoid();
        this.dateCreated = dateCreated;
        this.dateModified = dateCreated;
    }

    private setModifiedDate() {
        this.dateModified = new Date().toLocaleString();
    }

    addUpdate(text) {
        this.updates.push({
            text,
            date: new Date().toLocaleString()
        });
        this.setModifiedDate();
    }
}

class JourneyCollection {
    constructor(journeys = []) {
        this.ids = [];
        this.itemsById = {};
        journeys.forEach(journey => {
            this.ids.push(journey._id);
            this.itemsById[journey._id] = journey;
        });
    }
    getIds() {
        return this.ids;
    }
    getById(id) {
        return this.itemsById[id];
    }
    getList() {
        return this.getIds().map(id => this.getById(id));
    }
    add(name, subject) {
        const journey = new Journey(name, subject);
        this.ids.push(journey._id);
        this.itemsById[journey._id] = journey;
        return journey;
    }
    delete(id) {
        this.ids = this.getIds().filter(itemId => itemId !== id);
        delete this.itemsById[id];
    }
    // Can update the items directly but modifying the Journey instance.
    getSortedList() {
        return orderBy(this.getList(), 'dateModified', 'desc');
    }
    getBySubject(subject) {
        return this.getList().filter(journey => journey.subject === subject);
    }
}

const journeys = new JourneyCollection();