Having problem: this.setState is not a function-CodePudding

I'm having an issue, where I can't input text when I run my app, due to "this.setState is not a function". I am practicing react.js.

I have no idea about the problem here, I'm new to react and couldn't figure out how to use bind to overcome this problem so I decided to ask here. First post ever!

Uncaught TypeError: this.SetState is not a function

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
    }
}

CodePudding user response：

try change SetState to setState

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
    }
}