score:2

Accepted answer

they are exactly the same in terms of output but not in terms of performance and what they are. they are called stateful (class-based component) and stateless components (functional component).

generally, if you only want to render a component, i would suggest a functional component since it has better performance and makes the code clear and more reusable, allowing you to atomize better the functionalities.

on the other hand, if you are using some programming pattern (bloc, mvvm, etc) you may need to create classes to hold the business logic, what allows you to extend from each other.

class-based component (stateful)

  • class-based components make use of es6 class and extend the component class in react.

  • sometimes called "smart" or "stateful" components as they tend to implement logic and state.

  • react lifecycle methods can be used inside class components (componentdidupdate, componentdidmount, etc).

  • you pass props down to class components and access them with this.props (this keyword).

  • you need to bind/unbind events and functions.

functional component (stateless)

  • functional components are basic javascript functions. these are typically arrow functions but can also be created with the regular function keyword.

  • contrary to the class-based component, these ones sometimes referred to as "dumb" or "stateless" components as they simply accept data and display them in some form; that is they are mainly responsible for rendering ui.

  • react lifecycle methods (for example, componentdidmount) cannot be used in functional components. however, they allow you to use react hooks (usestate, useeffect, etc) which handles all the typical lifecycle benefits adding a cleaner, and reusable code.

  • there is no render method used in functional components, the return of the function will handle it. therefore, they mainly responsible for ui.

  • functional components can accept and use props.

  • they have slightly better performance than class-based ones. but the most important thing in my opinion is that they are cleaner and much more reusable.

references:


regarding your implementation, since gatsby-plugin-intl uses internal hooks (useintl) the following code should work:

import react from "react"
import { useintl, link, formattedmessage } from "gatsby-plugin-intl"

const rootindex = (props) => { 
 const intl = useintl();
  return (
    <layout>
      <seo
        title={intl.formatmessage({ id: "title" })}
      />
...

you are missing the const intl = useintl(); that allows your code to use the gatsby-plugin-intl internationalization. instead of passing it through props, once you import it, you need to instance it above the return statement.

score:0

same problem trying adding location and crumblabel variables in layout.js

adding

this.state = {
        location: props.location,
        crumblabel: props.crumblabel,
    };

and

const { location } = this.state;
const { crumblabel } = this.state;

works form me.

example code:

src/pages/index.js

import react from 'react';
import layout from '../components/layout';

const indexpage = ({location}) => (
  <layout location={location} crumblabel="home">
    ...
  </layout>
);

export default indexpage;

src/components/layout.js

import react, { component } from 'react';
import { breadcrumb } from 'gatsby-plugin-breadcrumb'; 

class layout extends component {
 constructor(props) {
    super(props);
    this.state = {
        location: props.location,
        crumblabel: props.crumblabel,
    };
  }

  render() {
    const { location } = this.state;
    const { crumblabel } = this.state;
    return (
  
      <breadcrumb location={location} crumblabel={crumblabel} /> 
     
    );
  }
}
export default layout;

Related Query

More Query from same tag