return a for loop in React functional component

Question

I'm building my own invoice/estimate generator with React.

I want to have a number of lines "product" equivalent to my state.

I wanted to do a loop and return my JSX. But I have no error, but my line product appears once only, and my state is set to 2.

Here is my try :

export default function ProductInformations(props: TProductInformations) {
    const [numberOfProducts, setNumberOfProducts] = useState<number>(2);

    const handleNumberOfProducts = (type: string) => {
        if (type === "add") return setNumberOfProducts(numberOfProducts + 1);
        if (type === "remove") return setNumberOfProducts(numberOfProducts - 1);
    };

    for (let i = 0; i <= numberOfProducts; i++) {
        return (
            // here is <p> with "price", "quantity", "name of the product"...
        );
    }
}

As the JSX is a bit long, I don't want to do a function that returns html and call the function in JSX.

Any idea why ?

nope. I understand the JavaScript part. It is the return of the JSX — Johan
– Johan, Commented Jan 22, 2023 at 17:53

Konrad · Accepted Answer · 2023-01-22 17:56:53Z

0

Either push to an array

export default function ProductInformations(props: TProductInformations) {
    const [numberOfProducts, setNumberOfProducts] = useState<number>(2);

    const handleNumberOfProducts = (type: string) => {
        if (type === "add") return setNumberOfProducts(numberOfProducts + 1);
        if (type === "remove") return setNumberOfProducts(numberOfProducts - 1);
    };
    
    const products =[]
  
    for (let i = 0; i <= numberOfProducts; i++) {
        products.push(
            // here is <p> with "price", "quantity", "name of the product"...
        );
    }
  
    return <>{products}</>
}

or use map

export default function ProductInformations(props: TProductInformations) {
    const [numberOfProducts, setNumberOfProducts] = useState<number>(2);

    const handleNumberOfProducts = (type: string) => {
        if (type === "add") return setNumberOfProducts(numberOfProducts + 1);
        if (type === "remove") return setNumberOfProducts(numberOfProducts - 1);
    };
    
  
    return [...Array(numberOfProducts + 1)].map(() => /* here is <p> with "price", "quantity", "name of the product"... */)

}

Resources:

answered Jan 22, 2023 at 17:56

Konrad

24.9k5 gold badges35 silver badges78 bronze badges

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

1 Comment

Johan Over a year ago

So I guess map is the only way ? I can't just tell React to create this HTML element state number of times ?

Collectives™ on Stack Overflow

return a for loop in React functional component

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related