React webcomponent example

ModernComponentStyle.js

import { OvertimeVisualizer } from 'overtime-visualizer';
import React, {useState} from 'react';
import {wrapWc} from 'wc-react';

const ModernReactExample = () => {
  const OtVisualizer = wrapWc("overtime-visualizer");
  const [hours, setHours] = useState(0);
  const [overtime] = useState(
      [
        {name: 'Free overtime', color: '#F77', value: 10, priority: 1},
        {name: 'Valuable overtime', color: '#FF7', value: 15, priority: 2},
        {name: 'Premium overtime', color: '#77F', value: 20, priority: 3}
      ]);
    console.log(overtime); 
    return (
      <div key="smtng" className="ModernReactExample">
        <hr/>

        <input type="number" onChange={(event) => setHours(event.target.value)}/>
        <OtVisualizer subtract={hours} overtimeData={overtime} />
      </div>
    ); 
  
}

export default ModernReactExample;

OldComponentStyle.js

import './App.css';
import 'overtime-visualizer';
import React, {Component} from 'react';

class OldReactExample extends Component {

  constructor(props) {
        super(props);

        this.visualizerRef = React.createRef();

    this.state = {
      overtime: [
                {name: 'Free overtime', color: '#F77', value: 10, priority: 1},
                {name: 'Valuable overtime', color: '#FF7', value: 15, priority: 2},
                {name: 'Premium overtime', color: '#77F', value: 20, priority: 3}
              
      ],
            subtract: 0
          
    }
      
  }

  inputChangeHandler(e) {
        this.setState({subtract: e.target.value});
      
  }

  render() {
    return (
          <div className="App">
                  <overtime-visualizer ref={this.visualizerRef} subtract={this.state.subtract} overtimeData={this.state.overtime} ></overtime-visualizer>
                          <hr/>
                                  <input type="number" onChange={this.inputChangeHandler.bind(this)}/>
            </div>
          
        ); 
      
  }

  componentDidMount() {
        this.visualizerRef.current.subtract = this.state.react;
        this.visualizerRef.current.overtimeData = this.state.overtime;
      
  }
}

export default OldReactExample;