if/else statements inside a function for react-table

December 14, 2021

Is it possible to add if/else logic in the iteration as I would like to add different class names depending on the value of paymentType?

This is used inside react-table. I’m unsure what the syntax is.

const PaymentTypes = ({ values }) => {
    // Iterate the array and create a badge-like component
    return (
        <>
            {values.map((paymentType, idx) => {
                return (
                    <span key={idx} className="badge badge-secondary">{paymentType}</span>
                );
            })}
        </>
    );
};


columns: [
                   
             {
                  Header: "Payment Type",
                  accessor: "paymentType",
                  // Cell method will provide the cell value; we pass it to render a custom component
                  Cell: ({ cell: { value } }) => <PaymentTypes values={value} />
             }
         ]

>Solution :

You can use ternary operators for example:

const PaymentTypes = ({ values }) => {
    // Iterate the array and create a badge-like component
    return (
        <>
            {values.map((paymentType, idx) => {
                return (
                    <span key={idx} className={paymentType==2?"badge badge-secondary":paymentType==1?"badge badge-primary":"badge badge-n"}>{paymentType}</span>
                );
            })}
        </>
    );
};