My datatable is showing 0 of 0 results even displaying a populated table using react

Guildb

This is my return element from the react that is populatingand creating the table

return (
    <div>
      <h3>{title}</h3>
      <div className="d-sm-flex align-items-center mb-4">
        <table  id="table_id" className="display table" style={{ width: `100%` }}>
          <thead>
            <tr>
              <th>Name</th>
              <th>Type</th>
              <th>Country</th>
              <th>Region</th>
              <th>Description</th>
              <th>Rec</th>
              <th></th>
              <th></th>
              <th></th>
            </tr>
          </thead>
          <tfoot>
            <tr>
              <th>Name</th>
              <th>Type</th>
              <th>Country</th>
              <th>Region</th>
              <th>Description</th>
              <th>Rec</th>
              <th></th>
              <th></th>
              <th></th>
            </tr>
          </tfoot>
          <tbody>
            {poi.length > 0 ? (
              poi.map((item) => (
                <tr key={item.id}>
                  <td>{item.name}</td>
                  <td>{item.type}</td>
                  <td>{item.country}</td>
                  <td>{item.region}</td>
                  <td>{item.description}</td>
                  <td>{item.recommendations}</td>
                  <td>
                    <button className="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm" id="recomendbut" onClick={() => recommend(item.id)}>
                      Recommend
                    </button>
                  </td>
                  <td>
                    <button className="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm" id="shareBtn" onClick={() => sharePoi(item.id)}>
                      Share
                    </button>
                  </td>
                  <td>
                    <button className="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm" id="detePoi" onClick={() => deletePoi(item.id)}>
                      Delete
                    </button>
                  </td>
                </tr>
              ))
            ) :""}
          </tbody>
        </table>
      </div>
    </div>

and i am using the react hook to say that this table is a datatable

React.useEffect(()=>{
        $(document).ready(function () {
          $('#table_id').DataTable();
      });  
      }, []);

basically the same as this guy in this thread https://datatables.net/forums/discussion/62505/datatable-showing-0-to-0-of-0-entries

but with react

anyone knows how to fix this ?

allan

You can't let both DataTables and React control the same DOM. If one changes the DOM, the other won't know about it. It looks to me like you are having React render the <tbody> content?

Instead use the data property to feed DataTables the poi array.

The one thing that I don't have an answer to is how to use React events for your buttons.

I plan to look into creating a proper, fully supported, React plug-in for DataTables in the new year, after DataTables 2 has been released.

Regards,
Allan

Guildb

Hello allan, yes react is rendering the whole page.

what/how you mean to use the data option to feed the datatable ?

allan

There is an example here. i.e. Let DataTables render the table DOM - otherwise weird things are going to happen if both DataTables and React try to control the same elements.

Allan

Guildb

Okay thank you I will give it a try