Unable to update state from onClick event of MDBDatable row in React

Question

I'm using MDBReact for the creation of a simple data table that has some rows and setMe and getMe buttons. onClick of setMe button I wish to set a value to the cropName state value and onClick of getMe button, I wish to retrieve the update state value.

The problem is that I only receive emptystring values every time inside the getMe function even after updating the state.

I have tried the following code, but unfortunately, it does not seem to update the state value. I only get an emptystring when the getMe button is clicked.

import React, { useState } from 'react';
import { render } from 'react-dom';
import { MDBDataTable } from 'mdbreact';
import './style.css';

import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';

function App() {
  const [cropName, setCropName] = useState('');
  const [data, setData] = useState([]);

  function setMe(e) {
    console.log(setCropName('Hello'));
  }

  function getMe(e) {
    console.log(cropName);
  }

  function loadTable() {
    setData({
      columns: [
        {
          label: 'Action',
          field: 'radio',
          sort: 'asc',
          width: 150,
        },
        {
          label: 'Position',
          field: 'position',
          sort: 'asc',
          width: 270,
        },
        {
          label: 'Office',
          field: 'office',
          sort: 'asc',
          width: 200,
        },
        {
          label: 'Age',
          field: 'age',
          sort: 'asc',
          width: 100,
        },
        {
          label: 'Start date',
          field: 'date',
          sort: 'asc',
          width: 150,
        },
        {
          label: 'Salary',
          field: 'salary',
          sort: 'asc',
          width: 100,
        },
      ],
      rows: [
        {
          radio: (
            <div className="field-input pt-2">
              Click this
              <button id="asdfsdasafsdf" onClick={setMe}>
                set me!
              </button>
              <button id="asdfsdasafsdf" onClick={getMe}>
                get me!
              </button>
            </div>
          ),
          position: 'System Architect',
          office: 'Edinburgh',
          age: '61',
          date: '2011/04/25',
          salary: '$320',
        },
        {
          name: 'Garrett Winters',
          position: 'Accountant',
          office: 'Tokyo',
          age: '63',
          date: '2011/07/25',
          salary: '$170',
        },
      ],
    });
  }
  return (
    <div>
      <MDBDataTable striped bordered hover data={data} />
      <button onClick={loadTable}>Load Table</button>
    </div>
  );
}

render(<App />, document.getElementById('root'));

Here the live demo of my implementation.

Answer 1

It looks like the state updates are not available to the functions fired from the table row event. I got my way around it by using useEffect statement and setting the dependency as the property that gets modified by the table row event.

import React, { useState, useEffect } from 'react';
import { render } from 'react-dom';
import { MDBDataTable } from 'mdbreact';
import './style.css';

import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';

function App() {
  const [cropName, setCropName] = useState('');
  const [data, setData] = useState([]);

  useEffect(()=>{
    console.log('Crop changed')
  }, [cropName])

  function setMe(e) {
    setCropName('Hello ID: '+Math.random());
  }

  function getMe(e) {
    console.log(cropName);
  }

  function loadTable() {
    setData({
      columns: [
        {
          label: 'Action',
          field: 'radio',
          sort: 'asc',
          width: 150,
        },
        {
          label: 'Position',
          field: 'position',
          sort: 'asc',
          width: 270,
        },
        {
          label: 'Office',
          field: 'office',
          sort: 'asc',
          width: 200,
        },
        {
          label: 'Age',
          field: 'age',
          sort: 'asc',
          width: 100,
        },
        {
          label: 'Start date',
          field: 'date',
          sort: 'asc',
          width: 150,
        },
        {
          label: 'Salary',
          field: 'salary',
          sort: 'asc',
          width: 100,
        },
      ],
      rows: [
        {
          radio: (
            <div className="field-input pt-2">
              Click this
              <button id="asdfsdasafsdf" onClick={setMe}>
                set me!
              </button>
              <button id="asdfsdasafsdf" onClick={getMe}>
                get me!
              </button>
            </div>
          ),
          position: 'System Architect',
          office: 'Edinburgh',
          age: '61',
          date: '2011/04/25',
          salary: '$320',
        },
        {
          name: 'Garrett Winters',
          position: 'Accountant',
          office: 'Tokyo',
          age: '63',
          date: '2011/07/25',
          salary: '$170',
        },
      ],
    });
  }
  return (
    <div>
      <MDBDataTable striped bordered hover data={data} />
      <button onClick={loadTable}>Load Table</button>
      {cropName}
    </div>
  );
}

render(<App />, document.getElementById('root'));

Demo