How to create an new instance of an Object in React?

Question

Obviously in normal JS I can do this

var Card = function(rank, suit){
    this.rank = rank; 
    this.suit = suit
  }

var cardOne = new Card('3', 'H');

cardOne // Card {rank: "3", suit: "H"}

So how would I do that in react and ES6 land?

I have tried something like this:

class ReactApp extends React.Component{

  Card = (rank, suit) => {
    this.rank = rank;
    this.suit = suit;
  };

  createCard = () => {
    let CardObj = {};
    let card = new this.Card('3', 'Hearts');
    console.log(card);
  };

}

(not showing render method for now)

but how can I get that to log the correct thing in react? how are functions treated inside React? (key value pairs?) and how do i define objects etc?

Answer 1

If you are looking for Card model you can create a new ES6 class for that

export class Card {
  constructor(rank, suit) {
    this.rank = rank;
    this.suit = suit;
  }
}

After this, you can import that model into react component as

import {Card} from './card'

Answer 2

A little bit late, but still...

Since React v16.8 when hooks were introduced it's been suggested to use functional components over class ones.

const Card = function(rank, suit) {
    const rank = rank;
    const suit = suit;
    return { rank, suit };
};

const cardOne = Card("3", "H");

cardOne; // {rank: "3", suit: "H"}
cardOne.rank; // "3"
cardOne.suit; // "H"

But that is a little old-styled. Most elegant way to do this in one line of code using arrow function:

const Card = (rank, suit) => { return { rank: rank, suit: suit } }

That's all. Now you can assign your variables.

const cardOne = Card('3', 'H')

cardOne // {rank: "3", suit: "H"}
cardOne.rank // "3"
cardOne.suit // "H"

You can also add export in front of your constant to make it importable from anywhere:

// components.js
export const Card = (rank, suit) => { return { rank: rank, suit: suit } }


// App.js
import { Card } from './components'

const cardTwo = Card('2', 'F')
cardTwo // {rank: "2", suit: "F"}
cardTwo.rank // "2"
cardTwo.suit // "F"

Also you should better use const and let for declaring variables instead of var because of hoisting. Here is a good article explaining why.