Access method from class in react component

Question

I have my model.js like this :

export class Piece {
constructor(name, coordinate) {
    this.name = name;
    this.coordinate = coordinate;
    this.move = false;
  }
  init(){
    // some stuff
  }
  hasOne(){
    // some stuff
  }
}

export class Brick {
  constructor(name, level) {
    this.name = name;
    this.level = level;
  }
  getScore(level){
    // some stuff
  }
}

export class Dashboard {
  constructor(){
    this.start();
  }

  start(){
    this.firstPiece = new Piece('A', 5);
  }

}

...

and i have my component Dashboard

import * as Model from './model';
<Dashboard game={new Model.Dashboard()} />

And Piece

import React from 'react';
const Piece = (props) => {
  console.log(props)
  return(
    <div>
      {props.piece.init()}
    </div>
  );
};
export default Piece;

When i console.log(props), i only see the constructor props, i have no access to methods init(), only with proto

{props.piece.__proto__.init()}

Is there a way to access method in props without passing by proto ?

Answer 1

JavaScript uses prototypal inheritance, and ES6 classes are syntactic sugar for established inheritance recipe.

The understanding of prototypal inheritance is essential for effective JavaScript development.

piece prototypically inherits init from Piece class, piece.__proto__ === Piece.prototype. __proto__ is non-standard property that is used internally and shouldn't be used directly.

Due to how inheritance works, piece.init === piece.__proto__.init, unless it was shadowed. The method is expected to be used like {props.piece.init()} without problems.