album.js

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

class Album extends Component {
  state = {
    albums: []
  };

  componentDidMount() {
    fetch("http://localhost:3000/albums")
      .then(response => response.json())
      .then(data => {
        this.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();
    fetch("http://localhost:3000/albums", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(this.state.albums)
    }).catch(error => {
      console.log(error);
    });
  };

  render() {
    const { albums } = this.state;
    return (
      <div>
        {this.state.albums.map(album => (
          <AlbumFields
            key={album.id}
            album={album}
            downloadChange={this.downloadChange}
          />
        ))}
        <ButtonToggle onClick={this.save} color="success">
          Save
        </ButtonToggle>
      </div>
    );
  }
}

export default Album;

albumFields.js

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

const AlbumFields = ({ album, downloadChange }) => (
  <Container>
    <Form className="form">
      <FormGroup row>
        <Label for="title">Title:</Label>
        <Input
          type="text"
          name="title"
          id="title"
          value={album.title}
          placeholder="Title"
          onChange={downloadChange}
        />
      </FormGroup>
      <FormGroup row>
        <Label for="date">Date:</Label>
        <Input
          type="date"
          name="date"
          id="date"
          value={album.date}
          placeholder="Date"
          onChange={downloadChange}
        />
      </FormGroup>
      <FormGroup row>
        <Label for="description">Description:</Label>
        <Input
          type="textarea"
          name="description"
          id="description"
          value={album.description}
          placeholder="Description"
          onChange={downloadChange}
        />
      </FormGroup>
    </Form>
  </Container>
);

export default AlbumFields;