Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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;
like image 668
vanegeek Avatar asked Jul 12 '17 20:07

vanegeek


People also ask

How do you define a match in React JS?

Just create constructor i.e constructor(props) {} and inside it declare the id as a state variable to the class. Pass the value of match.params.id to the id by using id: this.props.match.params.id . Now u can access the state variable anywhere in your code and hope it solves your problem.

How do you access props in class components?

propName; We can access any prop from inside a component's class using the above syntax. The 'this. props' is a kind of global object which stores all of a components props.

How do I give my components props to React?

export default App; Basically that's how props are passed from component to component in React. As you may have noticed, props are only passed from top to bottom in React application's component hierarchy. There is no way to pass props up to a parent component from a child component.


2 Answers

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.

like image 187
Veljo Lasn Avatar answered Sep 27 '22 21:09

Veljo Lasn


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*/ />;
}
like image 34
Boris Avatar answered Sep 27 '22 21:09

Boris