How to make a working calculator in hydrogen

DionCosina
Shopify Partner
11 0 2

Hi, i started working with hydrogen yesterday and i want to make a working calculator that gives me the input back. 

 

This is the code that i have right now but on the site it gives a error. How do i fix this?

 

export function Calculator() {
  class FlavorForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = {value: 'coconut'};
 
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
 
    handleChange(event) {
      this.setState({value: event.target.value});
    }
 
    handleSubmit(event) {
      alert('Your favorite flavor is: ' + this.state.value);
      event.preventDefault();
    }
 
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
          <label>
            Pick your favorite flavor:
            <select value={this.state.value} onChange={this.handleChange}>
              <option value="grapefruit">Grapefruit</option>
              <option value="lime">Lime</option>
              <option value="coconut">Coconut</option>
              <option value="mango">Mango</option>
            </select>
          </label>
          <input type="submit" value="Submit" />
        </form>
      );
    }
  }
}
Replies 0 (0)