Check if my React array contains value if yes return certain component

Question

I have to render different components based on:

• if the items contain a certain value
• and if all 10 items have that value

const MyComponent = ({ data }: Props) => {
  const filteredItems = data.items?.filter(
    (item) => item?.type.includes(MyType.Value1) || item?.type.includes(MyType.Value2)
  );

  filteredItems.map((item) => {
    if (item.type.includes(MyType.Value1)) {
      return (
        <div>
          <Component one />
        </div>
      );
    }
    return (
      <div>
        <Component two />
      </div>
    );
  });
  return null;
};

export default MyComponent;

Answer 1

1/ if the items contain a certain value

(data?.items || []).find(item => [your condition here]) && <ComponentToRenderIfTrue />

2/ if all 10 items have that value

(data?.items || []).every(item => [your condition here]) && <ComponentToRenderIfTrue />