album.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import AlbumFields from './albumFields';
import { ButtonToggle } from "reactstrap";

class Album extends Component {
  constructor(props) {
    super(props);
 
    this.save = this.save.bind(this);
    this.downloadChange = this.downloadChange.bind(this);

    this.state = {
      albums: [],
    };
 
  }

  
  componentDidMount() {
  console.log('COMPONENT HAS MOUNTED');
  var that = this;
  let albums = that.state.albums;

  fetch('http://localhost:3000/albums')
    .then((response) =>
      response.json())
    .then((data) => {
          that.setState({albums : data });
        }).catch((error) => {
            console.log("Error " + error)
          })
}

downloadChange (event) {
   const { name, value } = event.target;
   this.setState(prevState => ({
   albums: { ...prevState.albums, [name]: value }
   }));
  }

save(event) {
   event.preventDefault();
   var that = this;
   let albums = that.state.albums;

    let albumRequest = new Request('http://localhost:3000/albums', {
    method: 'POST',
    headers: new Headers({ 'Content-Type': 'application/json' }),
    body: JSON.stringify(albums),
    });


    fetch(albumRequest)
      .then((response) =>
        response.json())
          .then((data) => {
          })
          .catch((error) => {
            console.log(error)
          })
     
}

  

  render() {
    return (
      <div>
     <AlbumFields album={this.state.albums} downloadChange={this.downloadChange} />

     <ButtonToggle onClick={this.save} color="success">Save
           </ButtonToggle> 
      </div>
    );
  }
}
 
 
export default Album;

albumFields.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Album from './album';
import { Container } from 'reactstrap';
import { Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';


class AlbumFields extends Component {
  constructor(props) {
    super(props);

}

render() {
 return(
 
        
        <Container>
	 <Form className="form">
         <FormGroup row>
          <Label for="title">Title:</Label>
           <Input type="text" name="title" id="title" placeholder="Title" onChange={this.props.downloadChange}/>

         </FormGroup>
         <FormGroup row>
          <Label for="date">Date:</Label>
           <Input type="date" name="date" id="date" placeholder="Date" onChange={this.props.downloadChange}/>
       
         </FormGroup>
         <FormGroup row>
          <Label for="description">Description:</Label>
           <Input type="textarea" name="description" id="description" placeholder="Description" onChange={this.props.downloadChange}/>
       
         </FormGroup>
         </Form>
	</Container>

    );
  }
};

export default AlbumFields;