test.js

import React, { Component } from 'react'
import helpers from '../../utils/helpers'
import Categories from '../../utils/categories'
import SweetAlert from 'sweetalert-react';

class CourseCardDetail extends Component  {
  constructor(props) {
    super(props)
    this.state = {
      course: props.course,
      is_featured: props.course.is_featured,
      price_discount: props.course.price_discount,
      category_id: props.course.category_id,
      categories: [],
      description: props.course.description,
      published_at: props.course.createdon,
      alertShow: { state: false, message: ''},
    }
    this.handlePriceChange = this.handlePriceChange.bind(this)
    this.handleUpdate = this.handleUpdate.bind(this)
    this.handleIsFeatured = this.handleIsFeatured.bind(this)
    this.onSelectCategory = this.onSelectCategory.bind(this)
    this.handleDescription = this.handleDescription.bind(this)
  }

  componentDidMount() {
    helpers.getCategories().then(response => {
      this.setState({categories: response.data})
    })
  }

  onSelectCategory(categoryId) {
    this.setState({category_id: categoryId})
  }

  handlePriceChange(e) {
    this.setState({price_discount: e.target.value})
  }

  handleIsFeatured(e) {
    this.setState({is_featured: !this.state.is_featured})
  }

  handleDescription(e) {
    this.setState({description: e.target.value})
  }

  handleUpdate(e) {
    e.preventDefault()
    if(this.state.course.id === 'addCourse') {
      helpers.saveCourse(this.state).then(response => {
        if(!response.data.success) {
          this.setState({alertShow: {state: true, message: 'Failed'}})
        } else {
          this.setState({alertShow: {state: true, message: 'Success'}})
        }

      })
    } else {
      helpers.updateCourse(this.state).then(response => {
        this.setState({alertShow: {state: true, message: 'Success'}})
      })
    }

  }

  render() {
    return(
      <div className="container-fluid mt-5">
      <SweetAlert
        show={this.state.alertShow.state}
        title={this.state.alertShow.message}
        onConfirm={() => this.setState({ alertShow: {state: false, message: '' }})}
      />
        <div className="card">
          <div className="card-body">
            <div className="client-avatar"><img src={this.props.course.image} alt="..." className="img-fluid float-left pr-3" /> 
              <div className="status bg-green"></div>
            </div>
            <div className="client-title">
              <h3>{this.props.course.name}</h3>
              <input className="form-control col-md-5" value={this.state.description} onChange={this.handleDescription} type="text" />
            </div>
            <div className="client-info">
              <form onSubmit={this.handleUpdate}>
                <div className="form-group">
                    <label className="form-control-label">Price (&euro;)</label>
                    <input type="text" onChange={this.handlePriceChange} value={this.state.price_discount} placeholder="Price" className="form-control col-md-5" />
                    <div className="i-checks pt-2">
                      <input onChange={this.handleIsFeatured} type="checkbox" name="is_featured" value={this.state.is_featured} checked={this.state.is_featured} className="checkbox-template" />
                      <label>Featured</label>
                    </div>
                </div>
                <label>Category</label>
                <Categories course={this.state.course} categories={this.state.categories} onSelectCategory={this.onSelectCategory}/>
             { this.props.course.id === 'addCourse'
                ? <button className="btn btn-primary" type="submit">Save</button>
                : <button className="btn btn-primary" type="submit">Update</button>
              }
              </form>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default CourseCardDetail