createnl / grouped-checkboxes Goto Github PK

Hi @AlexLisenkov

It's me again.

When I want to update a state through the onChange props of CheckboxGroup, it's re-renders forever. The infinite re-rendering starts on page load, not waiting for a change event to happen first. It only does that for state update whether I'm using this.setState() or useState.
I think there is an issue between the CheckboxGroup and updating a state, or with react-table.

How can I stop the infinite re-rendering, please?

import React, { useState } from 'react;
import ReactTable, { ReactTableDefaults } from 'react-table';

function Table(props) {
  const [role, setRole] = useState({
      name: '',
      permissions: [],
      checked: false,
  });

  const data = [{ name: "Uzumaki" }, { name: "Goku" }];
  const actionHeaders = [{ name: "ADD" }, { name: "DELETE" }];

  const columns = [
    {
      Header: "Name",
      accessor: "name",
      Cell: row => {
        return (
          <span>
            <AllCheckerCheckbox />
            Select all
          </span>
        );
      }
    },
    ...renderActionColumns()
  ];

  const onCheckAll = checkboxes => {
    console.log("AllCheckboxes", checkboxes);
    
    // For some reason, this triggers an infinite re-rendering when the handler is on CheckboxGroup!
    setRole({
      ...role,
      permissions: checkboxes
    });
  };

  function renderActionColumns() {
    return actionHeaders.map(action => {
      return {
        Header: action.name,
        Cell: row => {
          return (
            <Checkbox />
          );
        }
      };
    });
  }

  // Where the issue starts.
  function TRComponent({ children, ...rest }) {
    return (
      <div className="rt-tr" role="row">
        <CheckboxGroup onChange={onCheckAll}>
          <span>{children}</span>
        </CheckboxGroup>
      </div>
    );
  }

  Object.assign(ReactTableDefaults, {
    TrComponent: TRComponent
  });

  return (
    <ReactTable data={data} columns={columns} />
  );
}

export default Table;

The below is the snippet.

there is term list, when user selects a term, the below component is called and a new term details is passed. But the issue is , if i have selected a checkbox for term1 and the same checkbox remain selected for term2 and so on as well.

Please help. I am state inside class component.

const Sentences = ({term,onCheckboxChanged})=>(

<CheckboxGroup onChange={onCheckboxChanged}  >
    <table>
        <thead>
            <tr>
                <th width="5%" className="text-center"> <AllCheckerCheckbox /></th>
                <th>All</th>
            </tr>
        </thead>  
        <tbody>
            {term.sentences.map((sentence,index) =>
                <tr>
                    <td className="text-center align-top"><Checkbox className="checkbox" value={index} /></td>
                    <td>{sentence}</td>
                </tr>
            )}
           
        </tbody>
</table>

when we move away from component it still fire onChange event, due to which i am not able to maintain the selected checkboxes.

Hi, can we use multiple CheckboxGroup inside the parent CheckboxGroup.
Like for example i have a table and i want to toggle each row with a Master checkbox and then i need another to toggle all checkboxes in table.
Is this possible.
I tried but only the inner ones (AllCheckerCheckbox) work. And master does not.

I upgraded to 1.1.0 and I notice the dynamic ID's get logged to the console. Was this intended? Is there a way to disable this? It looks like it comes from CheckboxGroup.tsx line 103.

Hi Team

I'm trying to apply defaultChecked to Checkbox but it's not working. I get a warning saying:

Warning: ForwardRef contains an input of type checkbox with both checked and defaultChecked props..., etc.

How can I apply defaultChecked especially for pre-populating checkboxes?

Many Thanks

First of all, great work!
But can you just change a small thing in the documentation that it's
import { AllCheckerCheckbox, Checkbox, CheckboxGroup } from "@createnl/grouped-checkboxes";

and not just from "grouped-checkboxes"

Or just merge it #11 😅

Title is self explanatory