Pfthb

I am trying to send form data after submitting to the firebase database using redux in my react application, but I am unable to send the state so I tried tracking form data by console.log but the form data is empty. I am able to console log params but not this.state

Below is the code.

I am using redux in this app. createUser is my action

import React, Component from "react";
import connect from "react-redux";
import createUser from "../store/actions/userActions";

class UserForm extends Component 
 constructor(props) 
 super(props);
 this.state = form: , alert: false, alertData: ;
 this.submitMessage = this.submitMessage.bind(this);
 

 submitMessage = e => 
 e.preventDefault();
 const params = 
 name: this.inputName.value,
 email: this.inputEmail.value,
 city: this.inputCity.value,
 age: this.inputAge.value
 ;
 this.setState( form: params );
 console.log(params);
 console.log("-----------");
 console.log(this.state);
 this.props.createUser(this.state);
 ;

 render() 
 return (
 <div className="container">
 <div
 className="row"
 >
 User
 </div>
 <div className="container" style= padding: `10px 0px` />

 <div className="row">
 <div className="col-sm-4">
 <h2>Contact Form</h2>
 <form onSubmit=this.submitMessage ref="contactForm">
 <div className="form-group">
 <label htmlFor="name">Name</label>
 <input
 type="text"
 className="form-control"
 id="name"
 placeholder="Name"
 ref=name => (this.inputName = name)
 />
 </div>
 <div className="form-group">
 <label htmlFor="emai1">Email</label>
 <input
 type="email"
 className="form-control"
 id="email"
 placeholder="Email"
 ref=email => (this.inputEmail = email)
 />
 </div>
 <div className="form-group">
 <label htmlFor="city">City</label>
 <select
 className="form-control"
 id="city"
 ref=city => (this.inputCity = city)
 >
 <option value="India">India</option>
 <option value="USA">USA</option>
 <option value="UK">UK</option>
 <option value="Japan">Japan</option>
 <option value="Germany">Germany</option>
 </select>
 </div>
 <div className="form-group">
 <label htmlFor="age">Age</label>
 <input
 type="number"
 className="form-control"
 id="age"
 placeholder="Age"
 ref=age => (this.inputAge = age)
 />
 </div>
 <button type="submit" className="btn btn-primary">
 Send
 </button>
 </form>
 </div>
 </div>
 </div>
 );
 


const mapStateToProps = state => 
 return ;
;

const mapDispatchToProps = dispatch => 
 return 
 createUser: user => dispatch(createUser)
 ;
;

export default connect(
 mapStateToProps,
 mapDispatchToProps
)(UserForm);

There is you are missing two things,

1. Set state is async in nature so after set state, you must use call back to access it.




2. You are not passing form data ie. Params to createUser

Solution :

import React, Component from "react";
import connect from "react-redux";
import createUser from "../store/actions/userActions";

class UserForm extends Component 
 constructor(props) 
 super(props);
 this.state = form: , alert: false, alertData: ;
 this.submitMessage = this.submitMessage.bind(this);
 

 submitMessage = e => 
 e.preventDefault();

 const params = 
 name: this.inputName.value,
 email: this.inputEmail.value,
 city: this.inputCity.value,
 age: this.inputAge.value
 ;
 this.setState( form: params ,()=>
 this.props.createUser(this.state);
 );
 ;

 render() 
 return (
 <div className="container">
 <div
 className="row"
 >
 User
 </div>
 <div className="container" style= padding: `10px 0px` />

 <div className="row">
 <div className="col-sm-4">
 <h2>Contact Form</h2>
 <form onSubmit=this.submitMessage ref="contactForm">
 <div className="form-group">
 <label htmlFor="name">Name</label>
 <input
 type="text"
 className="form-control"
 id="name"
 placeholder="Name"
 ref=name => (this.inputName = name)
 />
 </div>
 <div className="form-group">
 <label htmlFor="emai1">Email</label>
 <input
 type="email"
 className="form-control"
 id="email"
 placeholder="Email"
 ref=email => (this.inputEmail = email)
 />
 </div>
 <div className="form-group">
 <label htmlFor="city">City</label>
 <select
 className="form-control"
 id="city"
 ref=city => (this.inputCity = city)
 >
 <option value="India">India</option>
 <option value="USA">USA</option>
 <option value="UK">UK</option>
 <option value="Japan">Japan</option>
 <option value="Germany">Germany</option>
 </select>
 </div>
 <div className="form-group">
 <label htmlFor="age">Age</label>
 <input
 type="number"
 className="form-control"
 id="age"
 placeholder="Age"
 ref=age => (this.inputAge = age)
 />
 </div>
 <button type="submit" className="btn btn-primary">
 Send
 </button>
 </form>
 </div>
 </div>
 </div>
 );
 


const mapStateToProps = state => 
 return ;
;

const mapDispatchToProps = dispatch => 
 return 
 createUser: user => dispatch(createUser(user))
 ;
;

export default connect(
 mapStateToProps,
 mapDispatchToProps
)(UserForm);

Due to setState is asynchronous you can access the changed state in a callback which you can pass as a second param to setState method. Please read more about setState

 submitMessage = e => 
 e.preventDefault();
 const params = 
 name: this.inputName.value,
 email: this.inputEmail.value,
 city: this.inputCity.value,
 age: this.inputAge.value
 ;
 this.setState( form: params , () => 
 console.log(params);
 console.log("-----------");
 console.log(this.state);
 this.props.createUser(this.state);
 );
 ;

You call createUser before setState is finished. Why use the state anyway? I would suggest:

submitMessage = e => 
 e.preventDefault();
 const params = 
 name: this.inputName.value,
 email: this.inputEmail.value,
 city: this.inputCity.value,
 age: this.inputAge.value
 ;
 this.props.createUser(params);
 ;