Category: React

To get checkbox value in React.js, we can use a state.

For instance, we write

const Component = () => {
  const [value, setvalue] = useState(false);

  return (
    <div className="form-check">
      <input
        className="form-check-input"
        checked={value}
        onChange={(e) => setValue(e.target.checked)}
        type="checkbox"
      />
      <label className="form-check-label">chechbox value</label>
      {value}
    </div>
  );
};

to set the onChange prop of the checkbox input to a function that calls setValue with the checked value of the checkbox.

Then we get the checked value from the value state and set that as the checked prop’s value to update the checkbox with the latest checked value.

To fix ‘a component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.’ error with React, we should make sure the value prop of the input is always set to a value.

For instance, we write

<input value={inputValue} />

to add an input with the value prop set to the inputValue state or prop.

We should make sure inputValue is never null or undefined to avoid this error.

To fix the error ‘cannot be used as a JSX component’ error with React TypeScript, we need to make sure our component returns a single root element.

For instance, we write

function Items(): JSX.Element {
  return (
    <>
      {items.map((item) => (
        <li>{item.name}</li>
      ))}
    </>
  );
}

to put our array of items in the Items component in a fragment so that the component can be compiled.

We call items.map to render an array of li elements so we need to wrap them with a fragment.

To add form validation with React MUI, we set the error prop to true when there’s an error.

For instance, we write

import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";

export default function ValidationTextFields() {
  return (
    <Box
      component="form"
      sx={{
        "& .MuiTextField-root": { m: 1, width: "25ch" },
      }}
      noValidate
      autoComplete="off"
    >
      <div>
        <TextField
          error
          id="outlined-error"
          label="Error"
          defaultValue="Hello World"
        />
        <TextField
          error
          id="outlined-error-helper-text"
          label="Error"
          defaultValue="Hello World"
          helperText="Incorrect entry."
        />
      </div>
    </Box>
  );
}

to add the error prop to the TextFields to show a red outline to indicate to the user that the input value is invalid.

To fix Invariant Violation: Objects are not valid as a React child error, we should make sure we put items in the braces that can be rendered.

For instance, we write

const Comp = () => {
  return (
    <>
      <p>{"foo"}</p>
      <p>{1}</p>
      <p>{null}</p>
    </>
  );
};

to render 'foo', 1 and null in the p elements.

null will render nothing.

And the other values will be displayed on the screen.

Objects can’t be rendered directly on the screen, so we’ve to convert them to strings with JSON.stringify if we want to show them on the screen.

For instance, we write

const Comp = () => {
  return (
    <>
      <p>{JSON.stringify({ foo: "bar" })}</p>
    </>
  );
};

to call JSON.stringify to convert { foo: "bar" } to a JSON string so they can be rendered.