Tengo un problema en el que no puedo ingresar texto cuando ejecuto mi aplicación, debido a que "this.setState no es una función". Estoy practicando react.js.

No tengo idea sobre el problema aquí, soy nuevo en reaccionar y no pude descubrir cómo usar bind para superar este problema, así que decidí preguntar aquí. ¡Primera publicación!

TypeError no capturado: this.SetState no es una función

 constructor(props){super(props); this.state = { db: '', username: '', fullname: '', phonenumber: '', dob: '' } this.interface = this.interface.bind(this); } componentDidMount(){ this.setState({ db: StartFirebase() }); } render(){ return( <> <label>Enter Username</label> <input type='text' id="userbox" value={this.state.username} onChange={e => {this.SetState({username: e.target.value});}}/> <br></br> <label>Enter Fullname</label> <input type='text' id="namebox" value={this.state.username} onChange={e => {this.SetState({username: e.target.value});}}/> <br></br> <label>Enter Phonenumber</label> <input type='text' id="phonebox" value={this.state.username} onChange={e => {this.SetState({username: e.target.value});}}/> <br></br> <label>Choose Day of Birth</label> <input type='text' id="datebox" value={this.state.username} onChange={e => {this.SetState({username: e.target.value});}}/> <br></br> <button id="addBtn" onClick={this.interface}>Add Data</button> <button id="updateBtn" onClick={this.interface}>Update Data</button> <button id="deleteBtn" onClick={this.interface}>Delete Data</button> <button id="SelectBtn" onClick={this.interface}>Get Data from DB</button> </> ) } interface(event){ const id = event.target.id if(id=='AddBtn'){ this.insertData(); } else if(id=='updateBtn'){ // this.insertData(); } else if(id=='DeleteBtn'){ // this.insertData(); } else if(id=='selectBtn'){ // this.insertData(); } } GetAllInputs(){ return { username: this.state.username, name: this.state.fullname, phone: Number(this.state.phonenumber), dob: this.state.dob } }