如何在 React 中迭代组件内的组件

Question

I have my products components which simply display products, price and description

const Product = (props) =>{
    return(
        <div>
            <p>Price: {props.price} </p>
            <p>Name: {props.name}</p>
            <p>Description: {props.desc}</p>
        </div>
    )
}

Which is rendered by the App component which loops thru the data in productsData and renders a product component for each index in the array.

class App extends React.Component {

  render() { 
    const products = productsData.map(product => {
      return <Product key={product.id} price={product.price}
      name={product.name} desc={product.description}   />
    })
    return (
      <div>
          {products}
      </div>
    );


  }
}

However, for the sake of learning purposes, I am trying to figure out how I am able to loop thru this array of products components (rendered in App) to only display, for example, prices that are greater than 10 or descriptions that are longer than 10 characters, for example.

productsData looks something like this

const productsData = [
    {
        id: "1",
        name: "Pencil",
        price: 1,
        description: "Perfect for those who can't remember things! 5/5 Highly recommend."
    },

I am assuming I need to use the.filter method inside the products component, but I can't seem to figure out where. I keep getting errors or undefined. Could someone clear this up, how one would iterate thru components nested inside other components?

Answer 1

Try this:

 const products = productsData.filter(product => (
  product.price > 10 || product.description.length > 10
)).map(p => (
   <Product key={p.id} price={p.price}
     name={p.name} desc={p.description}   
    />
))

Chaining methods filter with map allows you get the desired result.

Read more here about filter : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Answer 2

You can add a condition in .map , if condition matches then return the Product else return null .

const products = productsData.map((product) => {
  if (product.price > 10 || product.description.length > 10)
    return (
      <Product
        key={product.id}
        price={product.price}
        name={product.name}
        desc={product.description}
      />
    );
  return null;
});