How to use props in a function in class component?

Question

I have a problem. I used React Router to examine the URL path.

<Route path="/:brand" component={Container} />

I used it in the Container component

import React from 'react';
import CarPage from '../components/CarPage';
import '../styles/Container.css';

const Container = ({ match }) => {
    return (
       <CarPage brand={match.params.brand} />
   );
}

export default Container;

And in the component I want to use it in the "findMyIndex" function which is to check its index in the "carList" array

import React, { Component } from 'react';

class CarPage extends Component {
    state = {
        index: 0,
    }
    carList = ["Ford", "Fiat", "Ferrari"];

    findMyIndex = (props.brand) => {
        console.log(props.brand);    
    }
    render() {
        return (
            <p>{this.props.brand}</p>
        );
    }
}

export default CarPage;

Then he has to enter the found index in this.state.index. The problem is that I have no idea how to properly use props in a function in a class component. I am a beginner and would like to know how to use "brand" correctly in "findMyIndex". Please help.

Answer 1

Your props is accessible anywhere within the class. You can access it inside your findMyIndex method like this:

findMyIndex = () => {
    console.log(this.props.brand);    
}