Function CollectionReference.add() requires its first argument to be of type object, but it was: undefined

Question

I want to store the image in firebase storage and pass its URL reference in firestore. So I'm able to upload an image in storage but unable to pass the image URL reference in cloud firestore.

import React , {Component} from 'react';
import fire from './../fire'
import Uploadimg from './Uploadimg'

class Adproduct extends Component{

  geturl = (imurl) =>{
      this.setState({
          img:imurl
        });
  }
  submit = e =>{
      e.preventDefault()
      var db= fire.firestore();

      db.settings({
        timestampsInSnapshots: true
           });

      db.collection('newproducts').add(this.State)
      .then(res =>{
          console.log(res.id)

          this.props.submit()
      })
      .catch(err =>{
          console.log('something went wrong',err)
      })
  }
  takedata = e =>{
      this.setState({
          [e.target.name]: e.target.value 
      });
  }

  constructor(props){
      super(props);
      this.state ={
          name:'',
          productdetails:'',
          size:'',

      }
  }

  render() {

      return (
          <div className="container w3-padding">

          <div className="row w3-padding">
          <div className="col-md-6 w3-padding">
                   <h3 className="w3-tag w3-padding w3-center">Add New</h3>
              <form className="w3-container" onSubmit={this.submit}>

                     <label className="w3-text-blue"><b>Name</b></label>
                <input className="w3-input w3-border" type="text" name="name" value={this.state.name} onChange={this.takedata} required/>

                <label className="w3-text-blue"><b>productdetails</b></label>
                <input className="w3-input w3-border" type="text" name="productdetails" value={this.state.productdetails} onChange={this.takedata} required/>

            <label className="w3-text-blue"><b>size available</b></label>
            <input className="w3-input w3-border" type="text" name="size" value={this.state.size} onChange={this.takedata} required/>


                   <br/>
                   <Uploadimg geturl={this.geturl} />
                   <br/>
                    <button className="w3-btn w3-blue">Add</button>

                 </form>
          </div>
          </div>
          </div>
      );
  }

}
export default Adproduct;

Answer 1

If the accepted answer doesn't help you, you might be having the same issue I was having.

I solved this by using the typescript spread operator:

add(wizard: Wizard): Promise<DocumentReference> {
return this.wizardCollection.add({...wizard});

}

Hope this helps you.

Answer 2

use

db.collection('newproducts').add({...this.State})

instead of

db.collection('newproducts').add(this.State)