Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TriStateCheckbox: Warning: value prop on input should not be null. Consider using an empty string to clear the component or undefined for uncontrolled components. #7313

Closed
junjung929 opened this issue Oct 7, 2024 · 0 comments · Fixed by #7315
Labels
Type: Bug Issue contains a defect related to a specific component.
Milestone

Comments

@junjung929
Copy link

junjung929 commented Oct 7, 2024

Describe the bug

Using TriStateCheckbox component with null value gives console error.

Warning: value prop on input should not be null. Consider using an empty string to clear the component or undefined for uncontrolled components.

I am using the TriStateCheckbox as it is described in the component description https://primereact.org/tristatecheckbox/#basic. However, this provides errors in the console in the browser dev tools. I cannot not prevent the error from the log. Even if I initialized the state to false or true, it gives more errors when changing the state to null.

Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

I'm using the code example:

import React, { useState } from "react";
import { TriStateCheckbox } from 'primereact/tristatecheckbox';

export default function BasicDemo() {
    const [value, setValue] = useState(null);

    return (
        <div className="card flex flex-column align-items-center gap-3">
            <TriStateCheckbox value={value} onChange={(e) => setValue(e.value)} />
            <label>{String(value)}</label>
        </div>
    );
}

Any comment would be really appreciated! Thank you!

Reproducer

No response

System Information

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    primereact: latest => 10.8.3 
    react: 18.3.1 => 18.3.1

Steps to reproduce the behavior

  1. Go to the demo page https://primereact.org/tristatecheckbox/#basic (primereact version 10.8.3)

  2. Click "Edit in StackBlitz" on the Basic TriStateCheckbox example.
    image

  3. Go to the StackBlitz page for "PrimeReact Demo" and wait the packages are installed for the component.

  4. Open the browser dev tools.

  5. Error log appears in console.
    image

  6. Click the checkbox to change the state from null to true.

  7. Another error log appears in console.
    image

Expected behavior

The errors should not appear in the console of dev tools.

@junjung929 junjung929 added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Oct 7, 2024
akshayaqburst pushed a commit to qburst/primereact_qb_36 that referenced this issue Oct 8, 2024
…should not be null. Consider using an empty string to clear the component or undefined for uncontrolled components.
@melloware melloware added Type: Bug Issue contains a defect related to a specific component. and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Oct 8, 2024
@melloware melloware added this to the 10.8.4 milestone Oct 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a defect related to a specific component.
Projects
None yet
2 participants