How to refresh dataTable in ReactJS after the modal save button is clicked?

JosephKyleDielMahasol
March 9, 2023
313 views
2 votes
3 Answers

On my second week of learning React.

I need some help on how to refresh the dataTable in reactJs when I clicked the save button from the modal.

Here is my structure.

I have a parameterMaintenance.jsx below which imports the DataTable Component

ParameterMaintenance.jsx

import React from 'react'
import { ParameterDatable } from '../../components/ParameterDatatable'

export const ParameterMaintenance = () => {

  return (
    <div className='container mt-5'>
    <div></div>
    <ParameterDatatable/>
    </div>
  )
}

and then, I have a ParameterDataTable.jsx file that holds the dataTable.
notice that here, I called the AddParameter.jsx from the
DataTable actions property like this actions={<AddParameter/>}
to add a button that displays the modal form that handles the Saving of a new Parameter.

ParameterDatatable.jsx

import React, {useState, useEffect} from 'react'
import axios from 'axios';
import DataTable from 'react-data-table-component'; 
import DataTableExtensions from 'react-data-table-component-extensions';
import 'react-data-table-component-extensions/dist/index.css';
import "bootstrap/dist/js/bootstrap.bundle.js";
import "bootstrap/dist/css/bootstrap.css";
import { Link } from "react-router-dom";
import { AddParameter } from './AddParameter';

export const ParameterDatatable= () => {

    const [parameters, setParameters] = useState([]);
    
    useEffect(() => {
        loadParameters();
    }, []);

    
    const loadParameters = async () => {
        const result = await axios.get("http://localhost:8080/parameters");
        setParameters(result.data);
    };
    
    const deleteParam = async (id) => {
        await axios.delete(`http://localhost:8080/parameter/${id}`);
        loadParameters();
    };

    const column = [
        {
          name: "Param Name",
          selector: (row) => row.param_name,
          width: "180px" ,
          sortable: true,
          alignItems: 'center',
          display: 'flex',
        },
        {
          name: "Sequence Number",
          selector: (row) => row.param_sequence_number,
          width: "150px" ,
          sortable: true,
        },
        {
            name: "Parameter Value",
            selector: (row) => row.param_value,
            width: "150px" ,
            sortable: true,
        },
        {
            name: "",
            width: "110px" ,
            cell: row =>  
            <div className="App">
            <div className="openbtn text-center">
              <button
                type="button"
                class="btn btn-danger"
                data-bs-toggle="modal"
                data-bs-target="#myModal"
                
              >
                Delete
              </button>

              <div className="modal" tabindex="-1" id="myModal">
                <div className="modal-dialog">
                  <div className="modal-content">
                    <div className="modal-header">
                      <h5 className="modal-title">Danger</h5>
                      <button
                        type="button"
                        className="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"
                      ></button>
                    </div>
                    <div className="modal-body">
                      <p>Do you want to remove this record premanently?</p>
                    </div>
                    <div className="modal-footer">
                      <button
                        type="button"
                        className="btn btn-secondary"
                        data-bs-dismiss="modal"
                      >
                        Close
                      </button>
                      <button type="button" className="btn btn-primary" onClick={() => deleteParam(row.param_id)}
                      data-bs-dismiss="modal">
                        Yes
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
                ,
        },
        {
            name: "",
            width: "110px" ,
            cell: row =>  
                    <button
                    className="btn btn-primary mx-2"
                    onClick={() => deleteParam(row.param_id)}>
                      Edit
                </button>,
        },
      ]   
   
  return (
    <div className="datatable">
    <DataTableExtensions
    
    columns={column}
    data={parameters}
    print={false}
    export={false}
  >
    <DataTable 
        title="Parameters"
        columns={column} 
        data={parameters} 
        pagination
        fixedHeader
        fixedHeaderScrollHeight="450px"
        highlightOnHover
        actions={<AddParameter/>}
        
      subHeader

    />
    </DataTableExtensions>
    </div>
  )
}

And below is my AddParameter.jsx which is the modal form for saving new parameter

AddParameter.jsx

import React, {useState} from 'react'
import axios from "axios";
import "bootstrap/dist/js/bootstrap.bundle.js";
import "bootstrap/dist/css/bootstrap.css";
import { Link, useNavigate } from "react-router-dom";

export const AddParameter = () => {

    let navigate = useNavigate();

    const [parameter, setParameter] = useState({
        param_name: "",
        param_sequence_number: "",
        param_value: "",
    });

    const {param_name, param_sequence_number, param_value} = parameter;

    const onInputChange = (e) => {
        setParameter({ ...parameter, [e.target.name]: e.target.value });
      };   

      const onSubmit = async (e) => {
        e.preventDefault();
        console.log("Submitting");
        await axios.post("http://localhost:8080/parameter", parameter);
        navigate('admin/parameter1');

      };   

  return (
    <div>
    <button className="btn btn-sm btn-info"
    data-bs-toggle="modal"
    data-bs-target="#exampleModal">Create New</button>
    <div className="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div className="modal-dialog">
      <div className="modal-content">
        <div className="modal-header">
          <h5 className="modal-title" id="exampleModalLabel">New Parameter</h5>
          <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div className="modal-body">
          <form onSubmit={(e) => onSubmit(e)}>
            <div className="mb-3">
              <label for="recipient-name" className="col-form-label">Parameter Name</label>
              <input type={"text"} className="form-control" placeholder="Param Name" name="param_name" value={param_name}
               onChange={(e) => onInputChange(e)}/>
            </div>
            <div className="mb-3">
              <label for="message-text" className="col-form-label">Sequence Number</label>
              <input type={"text"} className="form-control" placeholder="Sequence Number" name="param_sequence_number" value={param_sequence_number}
               onChange={(e) => onInputChange(e)}/>
            </div>
            <div className="mb-3">
              <label for="message-text" className="col-form-label">Parameter Value</label>
              <input type={"text"} className="form-control" placeholder="Value" name="param_value" value={param_value}
               onChange={(e) => onInputChange(e)}/>
            </div>
            <div className="modal-footer">
            <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="submit" className="btn btn-primary" data-bs-dismiss="modal">Save Parameter</button>
            </div>
        </form>
        </div>
      </div>
    </div>
  </div>
  </div>
  )
}

what I wanted to do is when I clicked the Save button, it will close the modal and refresh the DataTable, or call the loadParameters function which gets data from API in ParameterDataTable.jsx

Tried to use the navigate in reactjs to try to reload the page but the address will just add to the current address like this.

Answers

I understand your problem, you want to refresh table data after removing of user value. you learn about parent to child, child to parent concept in react and implement in project then solved your problem.

    //example: Parent Component;

    function ParentA(){
       const [state,setstate] = useState(false);
    
       useEffect(() => {
          //call fetch data method;
       },[state]);
    
       return(
          <ChildA state={state} setstate={setstate} />
       )
    }
    
    //child component.

    function ChildA({state, setstate}){
       const renderData = () => {
         setstate(!state);
       }

       return (
          <button onClick={renderData}>Click here</button>
       )
    }

- TakiKauser
- March 9, 2023 at 7:09 am
- 0 votes
0
In "onSubmit" function, set the axios response which contains all data in "setParameters" and
```
useEffect(() => {
    loadParameters();
}, [parameters]);
```
Hope, this will solve your problem. But have some studies about props drilling and parent-child components
Login or Signup to reply.

This one possible approach:

Pass loadParameter function as a prop of AddParameter component and call it when sending the form or when clicking the button.

export const AddParameter = (props) => {

  ....

      const onSubmit = async (e) => {
        e.preventDefault();
        console.log("Submitting");
        await axios.post("http://localhost:8080/parameter", parameter);
        props.loadParameter()

      };  
  ...// or call it onClick

Then pass it from the parent component

 <DataTable 
        title="Parameters"
        columns={column} 
        data={parameters} 
        pagination
        fixedHeader
        fixedHeaderScrollHeight="450px"
        highlightOnHover
        actions={<AddParameter loadParameter = {loadParameter} />}
        
      subHeader

    />

Finally, as you said in the comments that you want to clear the text boxes, you just have to call a function when closing the modal.

const resetTextAfterClosing = () => {
    setParameter({
        param_name: "",
        param_sequence_number: "",
        param_value: "",
    });
}

Please signup or login to give your own answer.

Click here to cancel reply.