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

Open
junjung929 opened this issue Oct 7, 2024 · 0 comments
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

1 participant