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;

dbuchet · Accepted Answer · 2021-01-14 19:56:15Z

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 />

answered Jan 14, 2021 at 19:56

dbuchet

1,6511 gold badge7 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

meez Over a year ago

thanks, how should I bake that into my example?

Greggory Wiley Over a year ago

Does this work in a retun as a jsx expression? for example return( {(item?.items || []).find(item => [contains('grid-cols')]) && <GridCols ItemType={TextBlockItem} scheme={scheme} gridCols={item?.[grid-cols-three]}/> } )

dbuchet Over a year ago

Of course! No reason it would not work :)

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related