error while attempting to save data to firebase using reactJS

Question

I'm trying to save data in firebase realtime database, but when I run the page and try to submit my inputs, an error will be shown says "TypeError: Cannot read property 'state' of undefined". enter image description here. I don't know if I did it correctly in this.state. I have an idea of getting the values inside my but I don't know how to handle such values and passed on sates.

class SideNav extends Component {

    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: '',
            fullname: '',
            purok: '',
            userType: 'purokLeader'
        }
    }

    state = {
        open: false,
    };

    onOpenModal = () => {
        this.setState({ open: true });
    };

    onCloseModal = () => {
        this.setState({ open: false });
    };

    signOut() {
        firebaseApp.auth().signOut();
    };



    signsUp() {


        firebaseApp.database().ref('Usersyeah/').push({
            name: this.state.fullname,
            purok: this.state.purok,
            email: this.state.email,
            password: this.state.password,
            user: "purokLeader"

        });

    };

    render() {
        const { open } = this.state;

        return (
            <div className="container">

                <div className="sidebar" style={sideBarColor}>
                    <div className="logoCont">
                        <img src={logo} className="sideLogo"/>
                    </div>

                    <Link to="/" ><img src={home} style={{width: '30px'}} alt="Log Out image"  /> Dashboard</Link>
                    <Link to="/docproc"> Document Services</Link>
                    <Link to="/sumbong"> Sumbong Center</Link>
                    <Link to="/announce"> Announcement</Link>
                    <div style={{ marginTop: ''}} ><Link to="#" onClick={() => this.onOpenModal()}><img src={logoutIcon} style={{width: '30px'}} alt="Log Out image"  /> Add User</Link></div>

                    <div style={{ marginTop: '35px'}} ><Link to="#" onClick={() => this.signOut()}><img src={logoutIcon} style={{width: '30px'}} alt="Log Out image"  /> Log out</Link></div>

                </div>
                <div>
                    <Modal open={open} onClose={this.onCloseModal} >
                        <h4>Simple centered modal</h4>
                        <input name="Name" id="fullname" type="text" ref="Fname" placeholder="Enter Your Fullname..." style={mainDivInput}     onChange={event => this.setState({ fullname: event.target.value })}/>
                        <input id="PurokNum" type="text" ref="PurokNum" placeholder="Purok No."  style={mainDivInput}    onChange={event => this.setState({ purok: event.target.value })}/>
                        <input id="email" type="email" ref="Email" placeholder="Enter Your Email..."  style={mainDivInput}    onChange={event => this.setState({ email: event.target.value })}/>
                        <input name="password" id="password" type="password" ref="Pword" placeholder="Enter Your Password..." style={mainDivInput}   onChange={event => this.setState({password: event.target.value })} />


                        <div>
                            <button className="btn btn-primary" style={{height: '40px', marginTop: '100px', marginLeft: '330px'}} onClick={this.signsUp} >Create</button>&nbsp;

                        </div>
                    </Modal>
                </div>
            </div>
        );
    }


}

export default withRouter(SideNav) ;

Praveen Rao Chavan.G · Accepted Answer · 2019-01-05 06:38:01Z

1

This is being caused because of this, change your signsUp() function at an arrow function

signsUp = () => {
        firebaseApp.database().ref('Usersyeah/').push({
            name: this.state.fullname,
            purok: this.state.purok,
            email: this.state.email,
            password: this.state.password,
            user: "purokLeader"

        });
    };

edited Jan 5, 2019 at 6:38

answered Jan 5, 2019 at 6:29

Praveen Rao Chavan.G

2,8803 gold badges24 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hemadri Dasari · Accepted Answer · 2019-01-05 06:36:00Z

1

As Praveen mentioned use arrow function or manually bind the function in constructor

You need to either manually bind the function or Turing to an arrow function to access state or props inside that function

   constructor(props) {
    super(props);
    this.state = {
        email: '',
        password: '',
        fullname: '',
        purok: '',
        userType: 'purokLeader'
    }
    this.signsUp = this.signsUp.bind(this);
}

answered Jan 5, 2019 at 6:36

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

Collectives™ on Stack Overflow

error while attempting to save data to firebase using reactJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related