Insertar documento MongoDB con React.js

Supongo que necesitará la base de datos en el servidor, por lo que es posible que necesite una API para publicar los datos, ya que la base de datos en sí no está en el cliente. Yo uso Superagente por enviar los datos y Mongoose para crear un esquema y una base de datos mongo.

modelo de mensaje.js

const mongoose = require('mongoose');

const Schema = mongoose.Schema;

// create a schema
const messageSchema = new Schema({
  // You may need to add other fields like owner
  addedOn: String,
  message: String,
});
const Message = mongoose.model('Message', messageSchema);
module.exports = Message;

servidor.js

import Message from './models/messageModel';

mongoose.connect('mongodb://user:[email protected]:port/database');

app.post('/api/messages', (req, res) => {
  const doc = new Message({ message: req.body.message })
  doc.save();
});

cliente.js

import React, { Component } from 'react';
import request from 'superagent';

class componentName extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: '',
    };
    this.handleMessageInput = this.handleMessageInput.bind(this);
  }
  handleMessageInput(e) {
    this.setState({ message: e.target.value });
  }
  handleSubmitMessage() {
    console.log('starting to submit profile');
    if (this.state.isFormFilledProfile) {
      console.log('Profile Form appears filled');
      const data = {
        message: this.state.message,
      };

      request
        .post('/api/messages')
        .send(data)
        .set('Accept', 'application/json')
        .end((err, res) => {
          if (err || !res.ok) {
            console.log('Oh no! err');
          } else {
            console.log('Success');
          }
        });
    }
  }
  render() {
    return (
      <div>
        <div>
          <form onSubmit={this.handleSubmitMessage}>
            <input
              onChange={this.handleMessageInput}
              value={this.state.message}
            />
            <button type='Submit' value='Submit'>Submit</button>
          </form>
        </div>
      </div>
    );
  }
}

export default componentName;

Es posible que también deba consultar la guía de formularios de reacción aquí. ¡¡¡Todo lo mejor!!!