How to include the Match object into a ReactJs component class?

I am trying to use my url as a parameter by passing the Match object into my react component class. However it is not working! What am I doing wrong here?

When I create my component as a JavaScript function it all works fine, but when I try to create my component as a JavaScript class it doesn’t work.

Perhaps I am doing something wrong? How do I pass the Match object in to my class component and then use that to set my component’s state?

My code:

import React, { Component } from 'react';

import axios from 'axios';

import PropTypes from 'prop-types';

class InstructorProfile extends Component {  

  constructor(props, {match}) {

    super(props, {match});

    this.state = {
        instructors: [],
        instructorID : match.params.instructorID
    };

  }

   componentDidMount(){


      axios.get(`/instructors`)
      .then(response => {
        this.setState({
          instructors: response.data
        });
      })
      .catch(error => {
        console.log('Error fetching and parsing data', error);
      });
    }

  render(){
    return (
      <div className="instructor-grid">

        <div className="instructor-wrapper">

       hi

        </div>

      </div>
    );
  }
}

export default InstructorProfile;

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

React-Router’s Route component passes the match object to the component it wraps by default, via props. Try replacing your constructor method with the following:

constructor(props) {
    super(props);
    this.state = {
        instructors: [],
        instructorID : props.match.params.instructorID
    };
}

Hope this helps.

Method 2

Your constructor only receives the props object, you have to put match in it…

constructor(props) {
  super(props);
  let match = props.match;//← here

  this.state = {
    instructors: [],
    instructorID : match.params.instructorID
  };
}

you then have to pass that match object via props int a parent component :
// in parent component...
render(){
  let match = ...;//however you get your match object upper in the hierarchy
  return <InstructorProfile match={match} /*and any other thing you need to pass it*/ />;
}

Method 3

for me this was not wrapping the component:

export default (withRouter(InstructorProfile))

you need to import withRouter:
import { withRouter } from 'react-router';

and then you can access match params via props:
  someFunc = () => {
      const { match, someOtherFunc } = this.props;
      const { params } = match;
      someOtherFunc(params.paramName1, params.paramName2);
  };

Method 4

Using match inside a component class

As stated in the react router documentation. Use this.props.match in a component class. Use ({match}) in a regular function.

Use Case:

import React, {Component} from 'react';
import {Link, Route} from 'react-router-dom';
import DogsComponent from "./DogsComponent";

export default class Pets extends Component{
  render(){
    return (
      <div>
        <Link to={this.props.match.url+"/dogs"}>Dogs</Link>
        <Route path={this.props.match.path+"/dogs"} component={DogsComponent} />
      </div>
        
    )
      
  }
}

or using render
<Route path={this.props.match.path+"/dogs"} render={()=>{
  <p>You just clicked dog</p>
}} />

It just worked for me after days of research. Hope this helps.

Method 5

In a functional component match gets passed in as part of props like so:

export default function MyFunc(props) {
//some code for your component here...
}

In a class component it’s already passed in; you just need to refer to it like this:
`export default class YourClass extends Component {
     render() {
        const {match} = this.props;
        console.log(match);
        ///other component code 
    }
}`


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x