Category: React

Sometimes, we want to add export to CSV button in React table with JavaScript.

In this article, we’ll look at how to add export to CSV button in React table with JavaScript.

How to add export to CSV button in React table with JavaScript?

To add export to CSV button in React table with JavaScript, we use the react-csv package.

To install it, we run

npm i react-csv

Then we use it by writing

import { CSVLink, CSVDownload } from "react-csv";

const csvData = [
  ["firstname", "lastname", "email"],
  ["John", "Doe", "john.doe@xyz.com"],
  ["Jane", "Doe", "jane.doe@xyz.com"],
];

const Comp = () => {
  //...
  return <CSVLink data={csvData}>Download me</CSVLink>;
};

to add the CSVLink component to add a button to let the user export the array data into a csv.

We can also write

import { CSVLink, CSVDownload } from "react-csv";

const csvData = [
  ["firstname", "lastname", "email"],
  ["John", "Doe", "john.doe@xyz.com"],
  ["Jane", "Doe", "jane.doe@xyz.com"],
];

const Comp = () => {
  //...
  return <CSVDownload data={csvData} target="_blank" />;
};

to do the same think by adding a link instead of a button.

Conclusion

To add export to CSV button in React table with JavaScript, we use the react-csv package.

Sometimes, we want to clean up memory leaks on an unmounted component in React Hooks.

In this article, we’ll look at how to clean up memory leaks on an unmounted component in React Hooks.

How to clean up memory leaks on an unmounted component in React Hooks?

To clean up memory leaks on an unmounted component in React Hooks, we use the useMountedState hook from the react-use package.

To install it, we run

npm i react-use

Then in our component, we add

const isMounted = useMountedState();

useEffect(() => {
  const asyncAction = executeAsyncAction();

  asyncAction.then((result) => {
    if (isMounted) {
      // ...
    }
  });
}, []);

to call the useMountedState hook to return a boolean to indicate if the component is mounted.

And then we check isMounted in the useEffect callback before we do anything.

Conclusion

To clean up memory leaks on an unmounted component in React Hooks, we use the useMountedState hook from the react-use package.

To pass props with styled-components with React, we pass it in as its child.

For instance, we write

const StyledWrapper = styled.div`
  /* ... */
`;

const Wrapper = ({ message }) => {
  return <StyledWrapper>{message}</StyledWrapper>;
};

to create the StyledWrapper component from the styled-components styled.div tag.

Then we create the Wrapper component that takes the message prop and pass it in as its child.

Sometimes, we want to add TypeScript interface signature for the onClick event in React.

In this article, we’ll look at how to add TypeScript interface signature for the onClick event in React.

How to add TypeScript interface signature for the onClick event in React?

To add TypeScript interface signature for the onClick event in React, we use the React.MouseEventHandler<HTMLButtonElement> type.

For instance, we write

interface IPropsSquare {
  message: string;
  onClick: React.MouseEventHandler<HTMLButtonElement>;
}

to define the IPropsSquare interface.

In it, we add the onClick property and set it to the React.MouseEventHandler<HTMLButtonElement> type.

Then we can set the onClick prop to a function that’s used as the click event handler for the button without type errors.

Conclusion

To add TypeScript interface signature for the onClick event in React, we use the React.MouseEventHandler<HTMLButtonElement> type.