title: Adding and deleting two collections with react functional components
body: <p>I want to add two collections with one action. 
  First one is file using multer and gridfs-stream and second is just literal with properties based on file. That what I achieved:
  <a href="https://i.stack.imgur.com/6Q6fY.png" rel="nofollow noreferrer">1)literal based on file</a> and
  <a href="https://i.stack.imgur.com/ZEeuR.png" rel="nofollow noreferrer">2)file uploaded</a>.
  In 1)(literal) this fileID property is just the same as _id of 2)(file) and src in 1) is just filename from 2) concatenated with some path.
  And here I have to problems.
  First is that this literal should have more properties, but I have problem with adding them.
   Here's the model(I think that there's isn't any problem, but it contain all props needed):</p>
  
  <pre><code>const mongoose = require('mongoose');
  const Schema = mongoose.Schema;
  
  // Create Schema
  const FileSchema = new Schema({
    fileID: {
      type: Schema.Types.ObjectId
    },
    src: {
      type: String,
    },
    altText: {
      type: String,
    },
    caption: {
      type: String,
    },
  });
  
  module.exports = File = mongoose.model('file', FileSchema);
  </code></pre>
  
  <p>The most important GET/POST routes(and also DELETE routes for second problem):</p>
  
  <pre><code>router.get('/', (req, res) =&gt; {
    File.find()
      .sort({ date: -1 })
      .then(files =&gt; res.json(files))
  });
  // @route POST /upload
  // @desc  Uploads file to DB
  router.post('/', upload.single('file'), auth, (req, res) =&gt; {
    const newFile = new File({
      fileID: req.file.id,
      src: 'api/files/image/' + req.file.filename,
      altText: 'No image',
      caption: req.body.caption
    })
    newFile.save()
  
  });
  
  // @route GET /files
  // @desc  Display all files in JSON
  router.get('/', (req, res) =&gt; {
    File.find()
      .sort({ date: -1 })
      .then(files =&gt; res.json(files))
  });
  
  // @route GET /files/:filename
  // @desc  Display single file object
  router.get('/:filename', (req, res) =&gt; {
    gfs.files.findOne({ filename: req.params.filename }, (err, file) =&gt; {
      // Check if file
      if (!file || file.length === 0) {
        return res.status(404).json({
          err: 'No file exists'
        });
      }
      // File exists
      return res.json(file);
    });
  });
  
  // @route DELETE /files/:id
  // @desc  Delete file
  router.delete('/:id', auth, (req, res) =&gt; {
    gfs.remove({ _id: req.params.id, root: 'files' }, (err, gridStore) =&gt; {
      if (err) {
        return res.status(404).json({ err: err });
      }
    });
    File.findById(req.body.fileID)
      .then(file =&gt; file.remove().then(() =&gt; res.json({ success: true })))
      .catch(err =&gt; res.status(404).json({ success: false }));
  });
  </code></pre>
  
  <p>and my React component most important fragments:</p>
  
  <pre><code>const SliderModal = ({ isAuthenticated, addFile }) =&gt; {
  
    const [modal, setModal] = useState(false);
    const [file, setFile] = useState([]);
    const [slideData, setSlideData] = useState({
      fileID: '',
      src: '',
      altText: '',
      caption: '',
    })
  
  
    const toggle = () =&gt; {
      setModal(!modal);
    };
  
    const onChange = e =&gt; {
      setFile(e.target.files[0]);
      setSlideData({
        ...slideData,
        [e.target.name]: e.target.value
      });
    };
  
    const onSubmit = e =&gt; {
      e.preventDefault();
  
      const newFile = new FormData();
      newFile.append('file', file);
      // const { src, altText, caption, fileID } = slideData;
  
      // const newSlide = {
      //   fileID,
      //   src,
      //   altText,
      //   caption
      // }
  
      // Add file via addItem action
      addFile(newFile);
      // addFile(newSlide);
  
      // Close modal
      toggle();
    }
  </code></pre>
  
  <p>and next part(with use of reactstrap):</p>
  
  <pre><code>&lt;Form onSubmit={onSubmit}&gt;
              &lt;FormGroup&gt;
                {/* &lt;Label for="caption"&gt;Caption&lt;/Label&gt;
                &lt;Input
                  type="text"
                  name="caption"
                  id="caption"
                  placeholder="Caption"
                  className="mb-3"
                  onChange={onChange}
                /&gt; */}
  
                &lt;Label for="file"&gt;File&lt;/Label&gt;
                &lt;Input
                  type="file"
                  name="name"
                  id="file"
                  placeholder="Add file"
                  onChange={onChange}
                /&gt;
                &lt;Button
                  color="dark"
                  style={{ marginTop: '2rem' }}
                  block&gt;
                  Add File
                  &lt;/Button&gt;
              &lt;/FormGroup&gt;
            &lt;/Form&gt;
  </code></pre>
  
  <p>in which, when I uncomment I have the text input in my modal in which, when I wrote anything I'm getting error:<a href="https://i.stack.imgur.com/cCdt9.png" rel="nofollow noreferrer">Error while inputting text </a>
  The second problem is connected with deleting files.
  At this moment I'm able to delete only one of items(literal or file) from database.
  Here's DELETE route again:
      // @route DELETE /files/:id
      // @desc  Delete file
      router.delete('/:id', auth, (req, res) => {
        gfs.remove({ _id: req.params.id, root: 'files' }, (err, gridStore) => {
          if (err) {
            return res.status(404).json({ err: err });
          }
        });
        File.findById(req.body.fileID)
          .then(file => file.remove().then(() => res.json({ success: true })))
          .catch(err => res.status(404).json({ success: false }));
      });</p>
  
  <p>Okay, I see that File.findById isn't good function, but the problem is that I want to delete them simultaneously. That's why in this literal I concluded that fileID property, but I'm really confused about it and can't find a solution. My idea was to search by this fileID property both and then delete them.
  Here's react function to delete only file(don't look at that is authenticated, that's just that I can delete file only when I'm logged in my app):</p>
  
  <pre><code>{files.map(({ fileID}) =&gt; (
              &lt; CSSTransition key={fileID} timeout={500} classNames="fade" &gt;
                &lt;ListGroupItem&gt;
                  {isAuthenticated ?
                    &lt;Button
                      className="remove-btn"
                      color="danger"
                      size="sm"
                      onClick={onDeleteClick.bind(this, fileID)}
                    &gt;&amp;times;
                    &lt;/Button&gt; : null}
  
                &lt;/ListGroupItem&gt;
              &lt;/CSSTransition&gt;
            ))}
  </code></pre>