Jantho1990

export default App

Jantho1990

import React, { Component } from 'react'
import inputIsValid from '../lib/validate'

export default class RatingInputs extends Component {
  constructor(props) {
    super()
    this.handleRating = this.handleRating.bind(this)
    this.state = {
      ...props
    }

Jantho1990

.App {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 8em;
  grid-template-areas: "title" "rating" "input";
  max-width: 100%;
  margin: auto;
  grid-gap: 1em;
  text-align: center;
}

Jantho1990

import React, { Component } from "react"
import FontAwesomeIcon from "@fortawesome/react-fontawesome"
import inputIsValid from '../lib/validate'

export default class StarRating extends Component {
  // ...

  componentWillMount() {
    let { rating, minRating, maxRating, starRatio, limit } = this.props
    if (!inputIsValid(rating, minRating, maxRating, starRatio, limit)) {

Jantho1990

import React, { Component } from 'react'
import inputIsValid from '../lib/validate'

export default class RatingInputs extends Component {
  // ...

  handleRating() {
    let rating = Number(this.refs.rating.value)
    let minRating = Number(this.refs.minRating.value)
    let maxRating = Number(this.refs.maxRating.value)

Jantho1990

export let ratingIsValid = function(rating, minRating, maxRating) {
  if (rating >= minRating && rating <= maxRating) return true
  return false
}

export let valuesNotZeroOrLess = function(...values) {
  let filteredValues = values.filter(value => value > 0)

  return values.length === filteredValues.length
}

Jantho1990

// ...

class App extends Component {
  constructor () {
    super()
    this.state = {
      rating: 5,
      minRating: 0,
      maxRating: 10,
      starRatio: 2,

Jantho1990

render() {
  let { rating, minRating, maxRating } = this.props
  return (
    <div className="rating-inputs">
      <label htmlFor="rating">Rating</label>
      <input type="number" ref="rating" name="rating" value={rating} min={minRating} max={maxRating} onChange={this.handleRating} />
    </div>
  )
}

Jantho1990

render() {
  let { rating } = this.state
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1 className="App-title">Welcome to React</h1>
      </header>
      <p className="App-intro">
        To get started, edit <code>src/App.js</code> and save to reload.

Jantho1990

handleStarRatingsUpdate(data) {
  this.setState({
    ...this.state,
    ...data
  })
}