Sending data from a form in React to DyanmoDB via AWS Lambda with Node

Question

I'm trying to use AWS Lambda and Node to write items to a DynamoDB table. I can hard-code the values I want to see with no problem but I can't quite figure out how to see anything when I'm writing to my front-end which is in React. But I get a 200 success message when looking at the network. 1. I broadly adapted from this tutorial . 2. Here's my function in Lambda:

const AWS = require('aws-sdk');
const docClient = new AWS.DynamoDB.DocumentClient({region: "us-east-1"});

exports.handler = (event, context, callback) => {
    console.log("Processing...");
    const params = {
        Item: {
            Corpus_Name: [], 
            Source_Name: []
        },

        TableName: "corpusTest"

    };
    const response = {
    statusCode: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Credentials': true,
    },
    body: JSON.stringify('Item Added'),
  };

    docClient.put(params, function(err, data) {
        if(err){
            callback(err, null);
        } else {
            callback(null, data);
        }
    })
};

With the const Params I can hard code whatever I want but I can't figure out what to put to tell it to actually take in what I type in my web-form. 1. Here's my form.js in React:

import React, { Component } from 'react';
import axios from 'axios';

export default class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Corpus_Name: '',
      Source_Name: '',
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleCorpusChange = this.handleCorpusChange.bind(this);
    this.handleSourceChange = this.handleSourceChange.bind(this);
  }

  handleCorpusChange = (event) => {
    this.setState({
      Corpus_Name: event.target.value
    });
  }

  handleSourceChange = (event) => {
    this.setState({
      Source_Name: event.target.value
    });
  }



  async handleSubmit(event) {
    event.preventDefault();
    const { Corpus_Name, Source_Name } = this.state;
    await axios.post(
      'https://15ix4rukfb.execute-api.us-east-1.amazonaws.com/default/serverlessAppFunction',
      { key1: `${Corpus_Name}, 
        key2: ${Source_Name}` }
    );
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>Corpus_Name:</label>
          <input
            type="text"
            name="Corpus_Name"
            onChange={this.handleCorpusChange}
            value={this.state.Corpus_Name}

          />

          <label>Source_Name:</label>
          <input
            type="text"
            name="Source_Name"
            onChange={this.handleSourceChange}
            value={this.state.Source_Name}

          />

          <button type="submit">Send</button>
        </form>
      </div>
    );
  }
}

Corpus_Name is my partition Key and Source_Name is my sort key if that helps.

Answer 1

You need to use event parameter to access the values sent via front end.

exports.handler = (event, context, callback) => {
    console.log("Processing...");
    const params = {
        Item: {
            Corpus_Name: event.key1, 
            Source_Name: event.key2
        },

        TableName: "corpusTest"

    };
    const response = {

because you are doing this

 await axios.post(
      'https://15ix4rukfb.execute-api.us-east-1.amazonaws.com/default/serverlessAppFunction',
      { key1: `${Corpus_Name}, 
        key2: ${Source_Name}` }
    );

Answer 2

I figured it out. In form.js I had key1 and key2 wrapped in quotes but they shouldn't have been. That combined with doing event.key1, event.key2 has it up and running.