在 React 功能组件中返回一个 for 循环

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?

Answer 1

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:

• https://reactjs.org/docs/lists-and-keys.html
• https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics
• https://beta.reactjs.org/learn/rendering-lists