Conditional Form Field Can't Be filled-CodePudding

When i choose and set value of status_pegawai, this form will show base on what i choose. But unfortunatelly if i fill the form, the value didn't set. I've already add bind to every function in constructor.

this is my handleField module :

handleField(){        
        let dasar
        switch (this.state.status_pegawai) {
            case 'PARTTIME':
                dasar= <React.Fragment><TableRow><td></td></TableRow></React.Fragment>
                this.setState({dasar})
                break;
            case 'PERBANTUAN':
                dasar= <React.Fragment>
                    <TableRow>
                        <td>No SK Penunjukan</td>
                        <td><FormControl className='formcontrol extra-large' type='text' name='no_sk_perbantuan' value={this.state.no_sk_perbantuan} onChange={this.onNoSKPerbantuanChange}></FormControl></td>
                        <td>Tanggal SK Penunjukan</td>
                        <td><FormControl className='formcontrol extra-large' type='date' name='tanggal_sk_perbantuan' value={this.state.tanggal_sk_perbantuan} onChange={this.onTanggalSKPerbantuanChange}></FormControl></td>
                    </TableRow>
                </React.Fragment>
                this.setState({dasar})
                break;
            case 'PENGAWAS':
                dasar= <React.Fragment>
                    <TableRow>
                        <td>No SK Penunjukan</td>
                        <td><FormControl className='formcontrol extra-large' type='text' name='no_sk_perbantuan' value={this.state.no_sk_perbantuan} onChange={this.onNoSKPerbantuanChange}></FormControl></td>
                        <td>Tanggal SK Penunjukan</td>
                        <td><FormControl className='formcontrol extra-large' type='date' name='tanggal_sk_perbantuan' value={this.state.tanggal_sk_perbantuan} onChange={this.onTanggalSKPerbantuanChange}></FormControl></td>
                    </TableRow>
                </React.Fragment>
                this.setState({dasar})
                break;
            case 'KONTRAK':
                dasar= <React.Fragment>
                    <TableRow>
                        <td>No SK Kontrak</td>
                        <td><FormControl className='formcontrol extra-large' type='text' name='no_sk_kontrak' value={this.state.no_sk_kontrak} onChange={this.onNoSKKontrakChange}></FormControl></td>
                        <td>Tanggal SK Kontrak</td>
                        <td><FormControl className='formcontrol extra-large' type='date' name='tanggal_sk_kontrak' value={this.state.tanggal_sk_kontrak} onChange={this.onTanggalSKKontrakChange}></FormControl></td>
                    </TableRow>
                </React.Fragment>
                this.setState({dasar})
                break;
            default:
                dasar= <React.Fragment>
                    <TableRow>
                        <td>No SK Kontrak</td>
                        <td><FormControl className='formcontrol extra-large' type='text' name='no_sk_kontrak' value={this.state.no_sk_kontrak} onChange={this.onNoSKKontrakChange}></FormControl></td>
                        <td>Tanggal SK Kontrak</td>
                        <td><FormControl className='formcontrol extra-large' type='date' name='tanggal_sk_kontrak' value={this.state.tanggal_sk_kontrak} onChange={this.onTanggalSKKontrakChange}></FormControl></td>
                    </TableRow>
                    <TableRow>
                        <td>No SK Calon Pegawai</td>
                        <td><FormControl className='formcontrol extra-large' type='text' name='no_sk_kontrak' value={this.state.no_sk_capeg} onChange={this.onNoSKCapegChange}></FormControl></td>
                        <td>Tanggal SK Calon Pegawai</td>
                        <td><FormControl className='formcontrol extra-large' type='date' name='tanggal_sk_kontrak' value={this.state.tanggal_sk_capeg} onChange={this.onTanggalSKCapegChange}></FormControl></td>
                    </TableRow>
                    <TableRow>
                        <td>No SK Pegawai Tetap</td>
                        <td><FormControl className='formcontrol extra-large' type='text' name='no_sk_kontrak' value={this.state.no_sk_kartap} onChange={this.onNoSKKartapChange}></FormControl></td>
                        <td>Tanggal SK Pegawai Tetap</td>
                        <td><FormControl className='formcontrol extra-large' type='date' name='tanggal_sk_kontrak' value={this.state.tanggal_sk_kartap} onChange={this.onTanggalSKKartapChange}></FormControl></td>
                    </TableRow>
                    <TableRow>
                        <td>No SK Masa Persiapan Pensiun</td>
                        <td><FormControl className='formcontrol extra-large' type='text' name='no_sk_kontrak' value={this.state.no_sk_mpp} onChange={this.onNoSKMPPChange}></FormControl></td>
                        <td>Tanggal SK Masa Persiapan Pensiun</td>
                        <td><FormControl className='formcontrol extra-large' type='date' name='tanggal_sk_kontrak' value={this.state.tanggal_sk_mpp} onChange={this.onTanggalSKMPPChange}></FormControl></td>
                    </TableRow>
                    <TableRow>
                        <td>No SK Pensiun</td>
                        <td><FormControl className='formcontrol extra-large' type='text' name='no_sk_pensiun' value={this.state.no_sk_pensiun} onChange={this.onNoSKPensiunChange}></FormControl></td>
                        <td>Tanggal SK Pensiun</td>
                        <td><FormControl className='formcontrol extra-large' type='date' name='tanggal_sk_pensiun' value={this.state.tanggal_sk_pensiun} onChange={this.onTanggalSKPensiunChange}></FormControl></td>
                    </TableRow>
                </React.Fragment>
                this.setState({dasar})
                break;
        }

and that code was called in handler function onStatusPegawaiChange


    async onStatusPegawaiChange(event){
        await this.setState({status_pegawai: event.target.value})
        await this.handleField()
    }

CodePudding user response：

The problem here is that you can't await for this.setState since it's not an async function. The workaround here is to send a callback function like so:

  onStatusPegawaiChange(event){
    this.setState({ status_pegawai: event.target.value }, this.handleField);
  }

Since this.handleField function is binded you won't need for it to be called like () => this.handleField()

Although this may fix your problem, I would advise the following:

The handleField function, instead of being called to store the visual component you want to render, it should just return the component you want and be called inside the render function, or in this case in place of dasar state.

handleField() {
  const { status_pegawai } = this.state;

  switch(status_pegawai) {
    case 'PARTTIME': return <React.Fragment><TableRow><td></td></TableRow></React.Fragment>;
    // ... all other cases
  }
}

And on the render function it would be something like this

  render() {
    return (
      <React.Fragment>
        {this.handleField()}
      </React.Fragment>
    );
  }

And with this, your status change function can just change to this

  onStatusPegawaiChange(event){
    this.setState({ status_pegawai: event.target.value });
  }