edit isian di BA pleno no. 3,4,5, urgent pake tombol hapus

components/Sanksi/BeritaAcara.js

@@ -197,10 +197,46 @@ class BeritaAcara extends Component {
             modalRemovePeserta: !this.state.modalRemovePeserta
         })
     }
+    removeTemuanLain = index => () => {
+        const temuanLain = this.state.temuanLain
+        const data = [...temuanLain]
+        data.splice(index, 1);
 
+        this.setState({
+            temuanLain: data,
+        }, this.setDataSuratBA()
+        );
+
+
+    }
+    removeMemberatkan = index => () => {
+        const memberatkan = this.state.memberatkan
+        const data = [...memberatkan]
+        data.splice(index, 1);
+
+        this.setState({
+            memberatkan: data,
+        }, this.setDataSuratBA()
+        );
+
+    }
+    removeMeringankan = index => () => {
+        const meringankan = this.state.meringankan
+        const data = [...meringankan]
+        data.splice(index, 1);
+
+        this.setState({
+            meringankan: data,
+        }, this.setDataSuratBA()
+        );
+
+    }
     render() {
         const { dataLaporan, dataSuratBA, dataPelanggaran } = this.props
-        const { descPelanggaran, tanggal, setTanggal } = this.state
+        const { descPelanggaran, tanggal, setTanggal, temuanLain } = this.state
+        console.log(temuanLain)
+        console.log(this.state.temuanLain)
+
         return (
             <div>
                 <Modal isOpen={this.state.modalRemovePeserta} >
@@ -259,7 +295,7 @@ class BeritaAcara extends Component {
                         <p>
                             Pada hari ini
                             {dataSuratBA?.isEditTanggal &&
-                                <span style={{ textIndent:"0rem"}}>
+                                <span style={{ textIndent: "0rem" }}>
                                     <DatePicker
                                         selected={tanggal ? new Date(tanggal) : tanggal}
                                         onChange={(tanggal) => {
@@ -399,7 +435,21 @@ class BeritaAcara extends Component {
 
                                         : <Button onClick={this.isEditTemuanLain} className=" p-0 m-0" color="success">Input Data</Button>}
                                     <ol type="a">
-                                        {dataSuratBA?.temuanLain?.map((value) => <li>{value}</li>) || this.state?.temuanLain?.map((value) => <li>{value}</li>)}
+                                        {
+                                            // dataSuratBA?.temuanLain?.map((value, index) =>
+                                            //     <li>
+                                            //         {value}
+                                            //         <button onClick={removeTemuanLain(index)} className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right"
+                                            //         />
+                                            //     </li>) ||
+                                            this.state?.temuanLain?.map((value, index) =>
+                                                <li>
+                                                    {value}
+                                                    <button onClick={
+                                                        this.removeTemuanLain(index)
+                                                    } className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right"
+                                                    />
+                                                </li>)}
                                     </ol>
                                 </li>
                                 <li>Hal-hal yang memberatkan, sebagai berikut:
@@ -412,7 +462,21 @@ class BeritaAcara extends Component {
 
                                         : <Button onClick={this.isEditKeberatan} className=" p-0 m-0" color="success">Input Data</Button>}
                                     <ol type="a">
-                                        {dataSuratBA?.memberatkan?.map((value) => <li>{value}</li>) || this.state?.memberatkan?.map((value) => <li>{value}</li>)}
+                                        {
+                                            // dataSuratBA?.memberatkan?.map((value) =>
+                                            //     <li>
+                                            //         {value}
+                                            //     </li>)
+                                            //     ||
+                                            this.state?.memberatkan?.map((value, index) =>
+                                                <li>
+                                                    {value}
+                                                    <button onClick={
+                                                        this.removeMemberatkan(index)
+                                                    } className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right"
+                                                    />
+                                                </li>
+                                            )}
                                     </ol>
                                 </li>
                                 <li>hal-hal yang meringankan, sebagai berikut:
@@ -425,7 +489,21 @@ class BeritaAcara extends Component {
 
                                         : <Button onClick={this.isEditMeringankan} className=" p-0 m-0" color="success">Input Data</Button>}
                                     <ol type="a">
-                                        {dataSuratBA?.meringankan?.map((value) => <li>{value}</li>) || this.state?.meringankan?.map((value) => <li>{value}</li>)}
+                                        {
+                                            // dataSuratBA?.meringankan?.map((value) =>
+                                            //     <li>
+                                            //         {value}
+                                            //     </li>)
+                                            //     ||
+                                            this.state?.meringankan?.map((value, index) =>
+                                                <li>
+                                                    {value}
+                                                    <button onClick={
+                                                        this.removeMeringankan(index)
+                                                    } className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right"
+                                                    />
+                                                </li>
+                                            )}
                                     </ol>
                                 </li>
                                 <li>