Switch case statement not rendering component

Question

My goal is to render a component based on the type prop I am passing to the component.

Here is how I am passing the type prop to the component:

export default function SearchListItem({
  type,
}) {

And here is my switch case statement:

const notificationComponent = (type) => {
    switch (type) {
      case type == 1:
        return <Text>1</Text>;
      case type == 2:
        return <Text>2</Text>;
      case type === 3:
        return <Text>3</Text>;
      case type === 4:
        return <Text>3</Text>;

      default:
        return <Text>No project</Text>;
    }
  };

And here is how I am rendering the component on the page:

  <Title>{notificationComponent(type)}</Title>

Here is how I am passing the props in from the parent component:

<ActivityListItem type={3} />
<ActivityListItem type={4} />

Currently, the component is only returning the No project case although I am passing in props that should match the different cases. Any idea what I'm doing wrong?

Looks like you need to call notificationComponent(type)? You're calling it with no arguments right now. — maazadeeb
– maazadeeb, Commented May 10, 2021 at 22:43

Finomnis · Accepted Answer · 2021-05-10 23:02:48Z

2

Your case statements are wrong. Only specify the value, not a comparison.

switch (type) {
    case type == 1:
        return <Text>1</Text>;
    ...
}

wouldn't do anything, as type == 1 would get evaluated to true and type is not equal to true.

Instead, do:

switch (type) {
    case 1:
        return <Text>1</Text>;
    ...
}

edited May 10, 2021 at 23:02

answered May 10, 2021 at 22:49

Finomnis

23.5k2 gold badges33 silver badges38 bronze badges

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

1 Comment

Finomnis Over a year ago

It was luck, though. Next time post a minimal reproducable example, to eliminate the luck factor and reduce the frustration of the people trying to help.

TaylorR · Accepted Answer · 2021-05-10 22:39:56Z

0

This may well mean that your var type is not defined or passed correctly.

You may want to console.log this var and see what it really is.

answered May 10, 2021 at 22:39

TaylorR

4,0335 gold badges30 silver badges44 bronze badges

Collectives™ on Stack Overflow

Switch case statement not rendering component

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related