Saving react form data to Moralis Class

Hello everyone, JS and react newbie here,

For a school project we’re building a product trading service for a psysical store that makes use of credits instead of fiat currency. Since our entire team is new to full stack development I’d figure this would be a nice opportunity to learn Moralis.

For registering new products I created a product component which renders a form with all the required fields for the new database object.

class ProductForm extends React.Component {
  constructor() {
    super();
    this.state = {
      artNum: null,
      prodName: null,
      categorie: null,
      credits: null,
      amount: null,
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    var value = target.value;
    const name = target.name;

    this.setState({ [name]: value });
  }

  submit() {
    console.log(this.state);
    alert(this.state.prodName + " is toegevoegd!");
  }

  render() {
    return (
      <div>
        <form className="productForm">
          <label>
            <p className="text">
              Artikelnummer:
              <br />
              <input
                placeholder="Artikelnummer"
                className="input"
                type="number"
                min="0"
                name="artNum"
                required
                onChange={this.handleInputChange}
              />
              <br />
            </p>
          </label>
          <label>
            <p className="text">
              Productnaam:
              <br />
              <input
                placeholder="Productnaam"
                className="input"
                type="text"
                name="prodName"
                required
                onChange={this.handleInputChange}
              />
              <br />
            </p>
          </label>
          <label>
            <p className="text">
              Categorie:
              <br />
              <select
                placeholder="Categorie"
                className="input"
                type="text"
                name="categorie"
                required
                onChange={this.handleInputChange}
              >
                <option value="Undefined"></option>
                <option value="Laptop">Laptop</option>
                <option value="Randapparatuur">Randapparatuur</option>
                <option value="Decoratie">Decoratie</option>
                <option value="Spellen analoog">Spellen analoog</option>
                <option value="Spellen digitaal">Spellen digitaal</option>
                <option value="Keukengerei">Keukengerei</option>
              </select>
              <br />
            </p>
          </label>
          <label>
            <p className="text">
              Credits:
              <br />
              <input
                placeholder="Credits"
                className="input"
                type="number"
                min="0"
                name="credits"
                required
                onChange={this.handleInputChange}
              />
              <br />
            </p>
          </label>
          <label>
            <p className="text">
              Aantal:
              <br />
              <input
                placeholder="Aantal"
                className="input"
                type="number"
                min="1"
                name="amount"
                required
                onChange={this.handleInputChange}
              />
              <br />
            </p>
          </label>
          <label>
            <button
              className="input"
              type="submit"
              onClick={() => this.submit()}
            >
              Toevoegen
            </button>
          </label>
        </form>
      </div>
    );
  }
}

export default ProductForm;

Now i’d like the submit() function to parse the data to my Moralis database instead of logging it to the console (which was just for testing purposes). Since javascript doesn’t support multi inheritance I can’t just use Moralis.Object inside the class as stated in the documentation. I’ve spent hours on google, stackoverflow and the Moralis/react-moralis documentation and I don’t seem to get anywhere. Would be great if one of the more experienced developers here could point me in the right direction <3

You won’t need multi inheritance to get this to work. What you can do is import moralis (assumed you have already installed it as a package):

import {Moralis} from 'moralis'

And then follow the documentation at https://docs.moralis.io/objects to save objects. You can use Moralis anywhere within your code (inside or outside classes should not matter). I hope this helps you in the right direction.

1 Like

Forgot the curly brackets in the import :sweat_smile:
This should get me going, thank you very much!

1 Like