How to remove commas from strings in an array?

Question

I need to remove commas which are in an array of odata objects. Each item has a description which sometimes contains commas. I need to remove those commas. Here is what I've attempted: Parent Component:

  <CSVComponent capxs={allCaps} />

Child Component:

import { CSVLink } from "react-csv";

export interface ICSVComponentProps {
    capxs: IListItem[];
}

export const CSVComponent: React.FunctionComponent<ICSVComponentProps> = (props: ICSVComponentProps) => {
    const [results, setResults] = React.useState([]);
   
    const headers = [
        { label: "Id", key: "id" },
        { label: "Title", key: "title" },
        { label: "Description", key: "description" },
    ];
 const getCaps = (c: IListItem[]) => {
        const results = [];
        for (let i = 0; i <= c.length - 1; i++) {
            results[i] = {
                id: props.capxs[i].Id,
                title: props.capxs[i].Title,
                description: props.capxs[i].Description.replace(",",""),
            };
        }
        setResults(results);
    };

    return (
        <DefaultButton className={styles.csvButton}
        onClick={() => getCaps(props.capxs)}
        >
            <CSVLink data={results} headers={headers}>
                Create CSV
            </CSVLink>
        </DefaultButton>
    );

Update: I've updated the code sample above with the Parent component props pass down and more of the child component. Here is an image showing the array that is created and stored in state. This state is then used by react-csv:

The description value in each item in the array has the comma removed, but react-csv seems to ignore this and it detects the commas, therefore creating incorrect columns in the produced csv file.

It's not clear when you're getting the objects. Are the objects the result of the react-csv step? There should be a way to configure react-csv to ignore commas in certain fields (by designating that field a "text" field or something similar). — Heretic Monkey
– Heretic Monkey, Commented Aug 22, 2022 at 16:32
"This works to remove the commas" - If the code already successfully removes commas, why are you asking how to remove commas? "but it's too late for react-csv" - The code shown doesn't appear to include that at all. So is the problem with removing commas from strings, or is the problem with your React component(s)? "I need [it] to happen at the start of the function above not during the for" - What does that even mean? You want to execute the for loop before declaring the results variable? This description of the problem doesn't make much sense... — David
– David, Commented Aug 22, 2022 at 16:34

Vasyl Penteleychuk · Accepted Answer · 2022-08-22 17:21:58Z

1

If I understand correctly what you need

const memoizedCaps = useMemo<IListItem[]>(() => {
    return caps.map(el => ({ ...el, description: el.description.replace(',', '') }));
}, [caps]);

const getCaps = () => {
    setResults(memoizedCaps);
};

answered Aug 22, 2022 at 17:21

Vasyl Penteleychuk

512 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NightTom Over a year ago

sorry this hasn't worked, I spoke to soon.

NightTom · Accepted Answer · 2022-08-23 08:53:52Z

0

This issue has been resolved by using:

 const getCaps = (caps: IListItem[]) => {
        const results = [];
        for (let i = 0; i <= caps.length - 1; i++) {
            results[i] = {
                description: props.capxs[i].Description.replace(/,/g, '""'),
            };
        }
        setResults(results);
    };

Not ideal but it's a limitation of react-csv. Ref: https://github.com/react-csv/react-csv/issues/176

Thanks for all your help.

answered Aug 23, 2022 at 8:53

NightTom

48520 silver badges52 bronze badges

Collectives™ on Stack Overflow

How to remove commas from strings in an array?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related