Search code examples
reactjsreact-propsreact-component

Is it possible to add data to a React component using the same prop label more than once, then have the component map that data into list items?

list of payment methods

I'd like to create a reusable component in React that displays a list of what payment methods are available for a certain service.

Is it possible to add the data to the component like this (with multiple uses of the same prop label)?

const Page = () => {
    <PaymentMethods method="BACS Transfer" method="Cheque" method="PayPal" method="Credit / Debit Card" />
}

Or perhaps it's an array method=[BACS Transfer, Cheque]

Either way, I'd like to know if it's possible. If so, what does the component look like to map over the data and output as <li> items.

If this is a bad approach, what is the best way to do it?

Thanks in advance!

Solution

  • Pass them as an array, like this:

    <PaymentMethods methods={["BACS Transfer", "Cheque", "PayPal", "Credit / Debit Card"]} />

    The component itself should be something such as this:

    const PaymentMethods = ({methods}) => {
    return <ul>
      {methods.map((method, index) => <li key={index}>{method}</li>)}
    </ul>
}