Minified react error 185

Well, maybe this is happening because of how I wrote my code. That happen because I am still learning React and all the stuff that I use in the code yesterday.

I am not yet even implementing a react tracker for the loading ui.

The purpose

I want to make a contact form for a course facilitator, but it is much more complex because I need image, checkbox for the program they choose, etc. At least for me that is complex than my blog.

Things that I have tried

I have tried it in development, it works like a charm.

The build also works seeing no problem.

The page after the build can still be visited.

The warning in Chrome

I get a violation in almost all of it. like in click handler, setTimeout, input handler.

The error that I get is three right after I click anything.

Two of the error start with error, but the last one is uncaught error. Maybe that does not matter?

Disclaimer

I may have used some Indonesian language in my code for name and stuff.

import React, { Component } from 'react';
import axios from 'axios';
import Header from "../components/Header"
import Footer from "../components/Footer"


export default class Daftar extends Component{
constructor(){

super();

this.state={ 

        enable: false,
     name:'',
     email:'',
     telepon:'',
     program:'',
     tempat_lahir:'',
     tanggal_lahir:'',

     selectedFile:'',
     selectedFile1:'',

    }
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleInputChange1 = this.handleInputChange1.bind(this);
}



handleChange = event =>{
    this.setState({ [event.target.name]:event.target.value });


}

handleInputChange(event) {
  this.setState({
      selectedFile: event.target.files[0],
    })
}
handleInputChange1(event) {
  this.setState({
      selectedFile1: event.target.files[0],
    })
}


onChange(event){
    let day_list = this.state.program;
    let check = event.target.checked;
    let checked_day = event.target.value;
    if(check){
        this.setState({
            program: [...this.state.program, checked_day]
        })
    }else{ 
        var index = day_list.indexOf(checked_day);
        if (index > -1) {
            day_list.splice(index, 1);
            this.setState({
                program: day_list
            })
        } 
    }
}


componentDidUpdate( prevState) {
    if ( 
      ( prevState.email !== this.state.email )||
      ( prevState.name !== this.state.name )||
      ( prevState.telepon !== this.state.telepon) ||
      prevState.program !== this.state.program
      ) {
      if (this.state.email ||
        this.state.name ||
        this.state.subject ||
        this.state.message
        ) {
        this.setState({ enabled: true });
      } else {
        this.setState({ enabled: false });
      }
    }
}


handleSubmit = event =>{

event.preventDefault();

const KK = new FormData() 
KK.append('kartu-keluarga', this.state.selectedFile)
console.warn(this.state.selectedFile);


const ijazah = new FormData() 
ijazah.append('ijazah', this.state.selectedFile1)
console.warn(this.state.selectedFile1);


let url = `${process.env.GATSBY_DIRECTUS_API_URL}/gemaclc/items/pendaftar?access_token=${process.env.GATSBY_DIRECTUS_TOKEN}`;

let url2 = `${process.env.GATSBY_DIRECTUS_API_URL}/gemaclc/files?access_token=${process.env.GATSBY_DIRECTUS_TOKEN}`;



let id_ijazah;
let id_item;
let id_kk;


axios.post(url, {

      status:"published",
      nama: this.state.name,
      email: this.state.email,
      telepon: this.state.telepon,
      program_yang_dipilih: this.state.program,
      tanggal_lahir: this.state.tanggal_lahir,
      tempat_lahir: this.state.tempat_lahir,
})
.then(res => {
  console.log(res)
  id_item = res.data.data.id;
  return axios.post(url2, KK, )
})
.then(res => {
  console.log(res)
  console.log(res.data.data.id)
  
  id_kk = res.data.data.id; 
  

  return axios.post(url2, ijazah, )
})


.then(res => {
  console.log(res.data.data.id) 
  id_ijazah = res.data.data.id;
  console.log(id_ijazah)
  return axios( `${process.env.GATSBY_DIRECTUS_API_URL}/gemaclc/items/pendaftar/${id_item}?access_token=${process.env.GATSBY_DIRECTUS_TOKEN}`, 
  {
    method:"patch",
    data :{
          kartu_keluarga: id_kk,
          ijazah:id_ijazah
                
            
        }, 
  })

})
.then(res =>{
  console.log(res)
})
.catch(error => {
    console.log(error)
});


};
render(){
    
let form = "daftar-form"
let div = "daftar-div"
let div1 = "daftar-div1"
let label1 = "daftar-label1"
let label2 = "daftar-label2"
let label3 = "daftar-label3"
let checkbox = "daftar-checkbox"
let email = "daftar-email"
let nama = "daftar-nama"
let p1 = "daftar-p1"
let submitDisable = "daftar-submit-disable"
let submit = "daftar-submit"

let programDiv = "daftar-program-div"


return(
<div>
    
    <Header/>
    <div className={div}> 
        <div className={div1}>
    
        <h1>Formulir Pendaftaran </h1>
    
    <form onSubmit={this.handleSubmit} className={ form}>
    
        <label className={label1}>
            <span>
                <p className={p1}> Nama : </p>
            </span>
        <input type="username" name="name" onChange={this.handleChange} 
        className={nama}
        />
        </label>
    
        <label className={label2}>
            <span>
                <p className={p1}> Email : </p>
            </span>
        <input type="email" name="email" onChange={this.handleChange} 
        className={email}
        placeholder="name@location.com"/>
        </label>
    
        <label className={label3}>
            <span>
                <p className={p1}> telepon : </p>
            </span>
        <input type="tel" name="telepon" onChange={this.handleChange}  className={nama}
        />
        </label>
      
        
        <label className={label3}>
            <span>
                <p className={p1}> Tempat Lahir : </p>
            </span>
        <input type="text" name="tempat_lahir" onChange={this.handleChange}  className={nama}
        />
        </label>
        <label className={label3}>
            <span>
                <p className={p1}> Tanggal Lahir : </p>
            </span>
        <input type="date" name="tanggal_lahir" onChange={this.handleChange}  className={nama}
        />
        </label>
        <div className={programDiv}>
    
    
    
     <h3>Program yang Di pilih :</h3>
     <label > 
           
        <input type="checkbox" onChange={this.onChange.bind(this)} name="program" className={checkbox}value="1"/>
            <span>
                <p className={p1}> paket A </p>
            </span>
      </label>
     <label > 
           
        <input type="checkbox" onChange={this.onChange.bind(this)} name="program" className={checkbox}value="2"/>
            <span>
                <p className={p1}> paket B</p>
            </span>
      </label>
     <label > 
            
        <input type="checkbox" onChange={this.onChange.bind(this)} name="program" className={checkbox}value={3}/>
            <span>
                <p className={p1}> paket C </p>
            </span>
      </label>
     <label > 
            
        <input type="checkbox" onChange={this.onChange.bind(this)} name="program" className={checkbox}value={4}/>
            <span>
                <p className={p1}> English Regular 3 bulan </p>
            </span>
      </label>
     <label > 
           
        <input type="checkbox" onChange={this.onChange.bind(this)} name="program" className={checkbox}value={5}/> 
            <span>
                <p className={p1}> English Camp </p>
            </span>
      </label>
     <label > 
            
        <input type="checkbox" onChange={this.onChange.bind(this)} name="program" className={checkbox}value={6}/>
            <span>
                <p className={p1}> English Private </p>
            </span>
      </label>
        </div>
        <div >
            <div >
                <br /><br />
                    <br />
                    <div >
                        <div >
                            <label className="text-white"> Kartu keluarga:</label>
                            <input type="file" name="upload_file" 
                            onChange={this.handleInputChange} />
                        </div>
                    </div>
                    <div >
                        <div >
                            <label >ijazah :</label>
                            <input type="file" name="upload_file" 
                            onChange={this.handleInputChange1} />
                        </div>
                    </div>
    
            </div>
          </div>
    
    {this.state.enabled?<input type="submit" value="Kirim" className={submit} 
     />:<input type="submit" value="Kirim" className={submitDisable} disabled/>}
    
    </form>
    
    <div><pre>{JSON.stringify(this.state.program) }</pre></div>;
    
        </div>
    </div>
    <Footer/>
</div>
)




    }
    
}

Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

I’ve got this error when deployment

I heard this error can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate.

But in my component I don’t have componentWillUpdate and componentDidUpdate.

why is it happening in my component?

this is my state init.

 constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: false,
      loading:false,
      username:"",
      password:"",
      message:"",
      alert:{
      open: false,
      type: "",
      message: ""
    }
    this.handleClose = this.handleClose.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleFormSubmit = this.handleFormSubmit.bind(this);

and this is my handlers

handleClose(event, reason){
      if (reason === "clickaway") {
        return;
      }
      this.setState(prevState => ({
        alert: {
          ...prevState.alert, open:false
        }
      }));
  
  }
  
  handleFormSubmit(e) {
    e.preventDefault();
    this.setState({loading:true})
    this.Auth.login(this.state.username, this.state.password)
      .then((res) => {
        if(res.status == 200){
          localStorage.setItem("username", this.state.username);          
          var ec2Ready = setInterval(()=>{
            this.Auth.checkStatus(this.state.username)
            .then((res)=>{
                if(res.ready == true){
                  this.setState({loading:false, isLoggedIn:true})
                  clearInterval(ec2Ready)
                }else{
                  this.setState(prevState=>({
                    ...prevState, message: res.msg
                  }))
                }
            })
          }, 8000)
        }else{  
          this.setState({
            loading:false,
            alert:{ open: true, message:res.err, type:"error"}
        });
        
        }      
      })
      .catch((err) => {
        this.setState({
          loading:false,
          alert:{ open: true, message:err.response.statusText, type:"error"}
      });
  })
  
}

  handleChange(e) {
    this.setState({
      [e.target.name]: e.target.value,
    });
  }
}