Objective: Building a React calendar Add Event page. (Please see code below, disregard commented lines)

There will be four input fields in the form for the Add Event page:

1) Title of Event

2) Img (to imbed the URL of an image of the event)

3) Date and Time of Event

4) Summary of Event

The calendar will be connected to a MongoDB to store the events. Any and all assistance in building the Add Event page is greatly appreciated!

The calendar home page has already been constructed, this request is for the Add Event page only. I just need to get the Add Event Page working, please view the code below for reference, it works up to line 52:

import React, {Component} from "react";

import "./index.css";

import Saved from "../components/Saved";

import Row from "../components/Row";

import Container from "../components/Container";

import Calendar from "../components/Calendar"

import {List,ListItem} from "../components/List";

import DeleteBtn from "../components/DeleteBtn";

import API from "../utils/API"

class Add extends Component {

state = {

title: "",

img: "",

date: "",

summary: "",

saved: []

};

// When the component mounts, get a list of all saved articles and update this.state.saved

// componentDidMount() {

// this.searchArticle ("Space");

// }

// searchArticle = query => {

// API.searchArticle(query)

// .then(res => this.setState({ articles: res.data.response.docs}))

// .then(console.log(this.state.articles))

// .catch(err => console.log(err));

// };

handleInputChange = event => {

const name = event.target.name;

const value = event.target.value;

this.setState({

[name]: value

});

};

// When the form is submitted, search the Giphy API for `this.state.search`

handleFormSubmit = event => {

event.preventDefault();

this.searchArticle (this.state.search);

};

render() {

return (

Add Event

{this.state.error}

Form

handleFormSubmit={this.handleFormSubmit}

handleInputChange={this.handleInputChange}

article={this.state.article}

/>

{this.state.articles.map(articles => {

return (

{articles.headline.print_headline}

{articles.lead_paragraph}

Publication Date: {articles.pub_date}

Link

);

})}

);

}

}

export default Add;