Category: React Answers

Sometimes, we want to format a number with commas in React.

In this article, we’ll look at how to format a number with commas in React.

How to format a number with commas in React?

To format a number with commas in React, we can use the number’s toLocaleString method.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <div>
      {(1234.56789).toLocaleString(undefined, { maximumFractionDigits: 2 })}
    </div>
  );
}

We call toLocaleString on 1234.56789 with { maximumFractionDigits: 2 } to return a number string that has the comma digit separators and the rounded to 2 decimal places.

Therefore, we see 1,234.57 displayed.

Conclusion

To format a number with commas in React, we can use the number’s toLocaleString method.

Sometimes, we want to fix the maxlength attribute not working issue with React.

In this article, we’ll look at how to fix the maxlength attribute not working issue with React.

How to fix the maxlength attribute not working issue with React?

To fix the maxlength attribute not working issue with React, we should make sure the input’s type attribute is set to text.

Also, we should set the maxLength prop to set the maxlength attribute.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [message, setMessage] = useState();

  const handleChangeInput = (e) => {
    setMessage(e.target.value);
  };

  return (
    <div>
      <input
        onChange={handleChangeInput}
        value={message}
        type="text"
        name="phone"
        maxLength="10"
      />
    </div>
  );
}

We add an input that with the maxlength attribute set to 10 to make sure the input value has never more than length 10.

The maxLength prop sets the value of the maxlength attribute of the input.

Also, we set the type attribute of the input to text to make sure maxlength is enforced.

Then we set the onChange and value props to the event handler function and value respectively.

Now we should see that we can’t enter more than 10 characters into the input.

Conclusion

To fix the maxlength attribute not working issue with React, we should make sure the input’s type attribute is set to text.

Also, we should set the maxLength prop to set the maxlength attribute.

Sometimes, we want to style react-select drop down options.

In this article, we’ll look at how to style react-select drop down options.

How to style react-select drop down options?

To style react-select drop down options, we can create an object with the styles we want to apply and set that as the value of the styles prop.

For instance, we write:

import React from "react";
import Select from "react-select";

const colourStyles = {
  control: (styles) => ({ ...styles, backgroundColor: "white" }),
  option: (styles, { isDisabled }) => {
    return {
      ...styles,
      backgroundColor: isDisabled ? "red" : "green",
      color: "#FFF",
      cursor: isDisabled ? "not-allowed" : "default"
    };
  }
};

const items = [
  { label: "orange", value: "orange" },
  { label: "apple", value: "apple", isDisabled: true }
];

export default function App() {
  return (
    <div>
      <Select
        defaultValue={items[0]}
        label="Single select"
        options={items}
        styles={colourStyles}
      />
    </div>
  );
}

We create the colourStyles object with the control method that return an object with the styles.

And we have the option method that returns the styles for the options.

We set the backgrounsdColor according to the value of the isDisabled property in the option.

And we set the color of the option to set the option text’s color.

Also, we set the cursor property to the cursor icon we want according to the isDisabled property of the option.

The isDisabled property comes from the isDisabled property of the items options.

Conclusion

To style react-select drop down options, we can create an object with the styles we want to apply and set that as the value of the styles prop.

Sometimes, we want to open file browser on the click of a div with React.

In this article, we’ll look at how to open file browser on the click of a div with React.

How to open file browser on the click of a div with React?

To open file browser on the click of a div with React, we can assign a ref to the file input.

And then we can get it and call click on it when we click on the div.

To do this, we write:

import React, { useRef } from "react";

export default function App() {
  const inputFile = useRef(null);

  const onClick = (e) => {
    inputFile.current.click();
  };

  return (
    <div>
      <input
        type="file"
        id="file"
        ref={inputFile}
        style={{ display: "none" }}
      />
      <button onClick={onClick}>open file browser</button>
    </div>
  );
}

We create the ref with the useRef hook.

Then we define the onClick function that calls inputFile.current.click to open the file browser.

Next, we assign the the inputFile ref as the value of the ref prop of the input so inputFile.current is set to the file input.

We set the style prop to { display: "none" } to hide the file input.

Finally, we add a button and set its onClick prop to the onClick function so when we click it, the file browser will show.

Conclusion

To open file browser on the click of a div with React, we can assign a ref to the file input.

And then we can get it and call click on it when we click on the div.

Sometimes, we want to fix code to meet the ‘Must use destructuring props assignment (react/destructuring-assignment)’ lint rule in React.

In this article, we’ll look at how to fix code to meet the ‘Must use destructuring props assignment (react/destructuring-assignment)’ lint rule in React.

How to fix code to meet the ‘Must use destructuring props assignment (react/destructuring-assignment)’ lint rule in React?

To fix code to meet the ‘Must use destructuring props assignment (react/destructuring-assignment)’ lint rule in React, we can destructure props from the props object parameter.

For instance, we write:

import React from "react";

const Table = ({ onBlur }) => {
  return (
    <table onBlur={onBlur}>
      <thead>
        <tr>
          <th>ID</th>
          <th>Title</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>
            <input type="text" />
          </td>
        </tr>
      </tbody>
    </table>
  );
};

export default function App() {
  const onBlur = (e) => {
    if (!e.currentTarget.contains(e.relatedTarget)) {
      console.log("blur event");
    }
  };

  return (
    <div>
      <h1>Table</h1>
      <Table onBlur={onBlur} />
    </div>
  );
}

We define the Table component that takes the onBlur prop.

In the component, we get the onBlur prop value by destructuring it from the object we have as the parameter.

Then we set the onBlur function as the value of the onBlur prop.

Conclusion

To fix code to meet the ‘Must use destructuring props assignment (react/destructuring-assignment)’ lint rule in React, we can destructure props from the props object parameter.