CODEWITHSUNDEEP
javascriptreactjs
Abhinav
Abhinav

Reputation: 3428

How to convert const reactjs component to class based

I am trying to figure out how to convert this code

const Child = ({ match }) => (
  <div>
    <h3>ID: {match.params.id}</h3>
  </div>
)

Into a class based component like this

class Home extends React.Component {

  render() {
      ....
  }
}

Normal const components I know how to convert, but I am not able to understand how to include match parameter in class based component.

Upvotes: 2

Views: 3888

Answers (2)

KARTHIKEYAN.A
KARTHIKEYAN.A

Reputation: 20078

function:

const Child = ({ match }) => (
  <div>
    <h3>ID: {match.params.id}</h3>
  </div>
)

Class: 

import React, { Component } from 'react';

class Child extends Component {
  render(){
    const {match} = this.props;
    return (
      <div>
         <h3>ID: {match.params.id}</h3>
       </div>
    );
  }
}
export default Child;

Upvotes: 1

Shubham Khatri
Shubham Khatri

Reputation: 281636

In your functional component definition

const Child = ({ match }) => (
  <div>
    <h3>ID: {match.params.id}</h3>
  </div>
)

The argument is the props passed down to the Child component, however when you use {match} you are detructuring only the prop match from all the props passed down.

See this answer: What is the children prop in React component and what PropTypes do

So when converting your functional component to the class component you can destructure the prop match in the render function like

class Child extends React.Component {

  render() {
      var {match} = this.props;
      return (
         <div>
             <h3>ID: {match.params.id}</h3>
           </div>
      )
  }
}

Upvotes: 7

Related Questions