数组映射中的条件渲染React Bootstrap列

import React from 'react';
import { Container, Row, Col } from 'react-bootstrap';

const data = [
  { id: 1, name: 'John', age: 25 },
  { id: 2, name: 'Jane', age: 30 },
  { id: 3, name: 'Bob', age: 20 },
];

const App = () => {
  return (
    <Container>
      <Row>
        {data.map((item) => (
          // 根据条件判断是否渲染列
          item.age >= 25 ? (
            <Col key={item.id} md={4}>
              <p>Name: {item.name}</p>
              <p>Age: {item.age}</p>
            </Col>
          ) : null
        ))}
      </Row>
    </Container>
  );
};

export default App;