0

I am creating a fairly simple stats page for a dashboard in my rails application. I am using react-rails to create react components in my app and have one for a stat card. enter image description here

For these cards I have created a very simple react component

import React from "react";
import PropTypes from "prop-types";
class StatCard extends React.Component {
  render() {
    const { title, data } = this.props;
    return (
      <React.Fragment>
        <div className="card">
          <div className="card-body">
            <div className="row align-items-center">
              <div className="col">
                <h6 className="card-title text-uppercase text-muted mb-2">
                  {title}
                </h6>

                <span className="h2 mb-0">{data}</span>
              </div>
              <div className="col-auto">
                <span className="h2 fe fe-briefcase text-muted mb-0" />
              </div>
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

StatCard.propTypes = {
  title: PropTypes.string,
  data: PropTypes.integer
};
export default StatCard;

In my html page right now I have 4 different components listed by calling this 4 different types with different data and a different title.

<%= react_component("StatCard", {title: 'Total users', data: @users.count }) %>

Would the best practice be to list an array of objects with this data listed and iterate over that and generate those components that way? If so, would this be data be best in the model or the controller?

The data structure might look something like this.

data = [
  { title: 'Total users', data: @users.count },
  { title: 'Total questions', data: @questions.count }
]
Trenton Tyler
  • 1,692
  • 3
  • 24
  • 53
  • although you can do the count on the rails side, it might be more flexible to just pass the object itself which will call it's to_json method. Then you can do the opertions on the JS side, e.g. this.props.data.length vs @users.count – engineerDave Dec 05 '18 at 18:16

1 Answers1

0

It is a good practice to have array of objects and iterate through that to return multiple similar components. you are using instance of user to get the count so it would be fine if you have them in controller

Sumanth Madishetty
  • 3,425
  • 2
  • 12
  • 24