Am I doing the right thing with the logic?

Question

React

Good evening!
Give advice on implementation, please.
There is a "Cars" component, there you can choose "BMW", "Mercedes-Benz" and "Audi". Once selected, the Car component opens. It looked like this:

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import axios from 'axios'
import Vimeo from '@u-wave/react-vimeo'

class Car extends Component {
    constructor(props) {
        super(props);
        this.state = { car: {contents: []} };
    }

    componentDidMount() {
        const carId = this.props.match.params.slug
        axios.get(`/api/car/${carId}`).then(response => {
            this.setState({ car: response.data })
        })
    }

    render() {
        const car = this.state.car
        return (
            <div className="container-fluid">
                <div className="row justify-content-around">
                    <div className="col-4">
                        <h1>{car.title}</h1>
                        <hr/>
                        <ul>
                            {car.contents.map(content => <li key={content.id}><Link to={`/content/${content.slug}`}>{content.title}</Link></li>)}
                        </ul>
                    </div>
                    <div className="col-8 vimeo_container">
                        <Vimeo video="23804756" id="vimeo_player"/>
                    </div>
                </div>
            </div>
        )
    }
}

export default Car

When you select a specific brand, a video on cars is displayed on the right in the menu, for example, "BMW".

When you click on one of the videos, the link changes (bmw-video-1).
Question: If the selection occurs on the same component, how to update the data? After all, after clicking on the link of one of the videos (content), you need to change the title and id of the video to play. How to implement it correctly? Is it really possible to write an event handler on onChangeURL?
Thanks in advance!

Answer 1

I would suggest that it is worth making a separate component for viewing the video. and you can do everything conveniently enough. There is another option - to make a nested component, which, when you click on the video, set the state and video parameters