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 ?

Does this answer your question? [Does return stop a loop?](https://stackoverflow.com/questions/11714503/does-return-stop-a-loop) — Konrad, Jan 22 '23 at 17:52
Check [javascript basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics) — Konrad, Jan 22 '23 at 17:52
nope. I understand the JavaScript part. It is the return of the JSX — Johan, Jan 22 '23 at 17:53
https://stackoverflow.com/questions/43047575/iterate-through-array-in-reactjs — Konrad, Jan 22 '23 at 17:54
`let i = 0; i <= numberOfProducts; i++` this will iterate `numberOfProducts` times + 1 btw — Konrad, Jan 22 '23 at 17:57

score 0 · Accepted Answer · answered Jan 22 '23 at 17:56

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:

So I guess `map` is the only way ? I can't just tell React to create this HTML element `state` number of times ? — Johan, Jan 22 '23 at 17:58

return a for loop in React functional component

1 Answers1