How to target props in Class Component

user_14595135 0
Viewed 88

I am biulding a MultiStep Form. At the Last page I am trying to push all the data to firebase. I am using props and states to pass the values from page to page. Unfortunantly I do not know, how to target the values and the last page. (I am using MaterialUI)

Error:

FirebaseError: Function addDoc() called with invalid data. Unsupported field value: undefined (found in field firstName in document usern/9ORMDRXjMCqTqNHRIsM7)

Thats the import part of my code

From.js

 export class UserForm extends Component {

state = {
    step: 1,
    firstName: '',
    lastName: '',
    email: '',
    occupuation: '',
    city: '',
    bio: ''
}

  render() {

    const { step } = this.state;
    const { firstName, lastName, email, occupuation, city, bio } = this.state
    const values = { firstName, lastName, email, occupuation, city, bio }

    switch (step) { ......
       
               case 3:
         return   (
            <Confirm
            nextStep={this.nextStep}
            prevStep={this.prevStep}
            values={values}
        />

Cofirm Page

           export class Confirm extends Component {

         SendData = (e) => {
            e.preventDefault();
                db.collection('usern').add(
                    {
                  firstName: this.props.firstName,
                 lastName:this.props.lastName,
                  email:this.props.email,
                 occupation: this.props.occupation,
                 city: this.props.city,
                  bio: this.props.bio,
                 timestamp: firebase.firestore.FieldValue.serverTimestamp(),
        
    }
    )
}


    render() {

    const {values:{firstName, lastName, email, occupation, 
    city, bio}} = this.props

   ......
    <RaisedButton  
                label="Confrim"
                primary={true}
                style={styles.button}
                onClick={this.SendData}
                  />
react-props firebase reactjs javascript
2 Answers

Change SendData function to this:

SendData = (e) => {
  e.preventDefault();
  const { firstName, lastName, email, occupation, city, bio } = this.props.values;
  db.collection('usern').add({
    firstName, lastName, email, occupation, city, bio,
    timestamp: firebase.firestore.FieldValue.serverTimestamp(),
  })
}
user_126087140

Confirm component doesnt get all UserForm props automatically, currently you are passing the data using values props so you can use it for getting the data you need:

     SendData = (e) => {
                e.preventDefault();
                    db.collection('usern').add(
                        {
                          firstName:  this.props.value.firstName
                             ...
                         }
user_30744580
Related