REACT - Switch case statement breaks

Question

I'm sure this is something silly, I'm barely awake and my brain doesn't seem to operate on the right level.

I'm working in react and I'm trying to make this switch statement work but it popups up with the following error: Expected an assignment or function call and instead saw an expression (Line 30 - I'll highlight where that line is). I need to have an iframe popup but it doesn't seem to work. I tried making a function and calling that function instead, still same error.

const HandleOnClick = example => {
    if (example ) {
      if (example.assets.length > 10) {
           //Not implemented yet
      } else {
        switch (example.assets[0].type) {
          case "link":
            window.open(example.assets[0].url);
            break;
          case "document":
             <iframe src={example.assets[0].url} title="title"> //THIS IS LINE 30 WHERE IT BREAKS
          </iframe>
            break;
          case "video":
            //Not implemented

            break;
          default:
            break;
        }
      }
    } else {
     ................

What do you want that HTML to do? Get returned? Assigned to some string? Something else? — takendarkk
– takendarkk, Commented Jul 27, 2020 at 21:31
@takendarkk So the switch statement is working as soon as I get rid off the iframe, adding the iframe creates the issue and the error. I just simply want the iFrame to showup OnClick of a component. — UnluckyLAD
– UnluckyLAD, Commented Jul 27, 2020 at 21:34

Matt Aft · Accepted Answer · 2020-07-27 21:53:47Z

3

Try using a state value to determine whether that iframe shows or not:

          case "link":
            window.open(example.assets[0].url);
            break;
          case "document":
             this.setState({ iframeUrl: example.assets[0].url }) // whatever you want to call it
            break;
          case "video":
            //Not implemented

            break;
          default:
            break;
        }

then in your code:

{this.state.iframeUrl && (
  <iframe src={this.state.iframeUrl} title="title">
  </iframe>
)}

edited Jul 27, 2020 at 21:53

answered Jul 27, 2020 at 21:33

Matt Aft

8,9663 gold badges28 silver badges38 bronze badges

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

3 Comments

UnluckyLAD Over a year ago

Thank you for your suggestion. I'm not sure how that would fit though, let me elaborate. I have 20 items mapped on the screen with an onClick functionality that calls this switch-case statement. Basically, I'm determining what should be called and opened depending on the asset type (link, document, picture). So quite literally, if the case is "document" just opend the iframe.

Matt Aft Over a year ago

the way you have it won't work though, on click you're just tossing in html. it has no idea what to do with it. I'll update my code to be more dynamic, but you have to think of making this approach work for your scenario.

kJs0 Over a year ago

What you're trying to achieve you need to use conditional rendering which the easiest implementation is using React's state and toggle a boolean with a button for whether you want to show something or not (as per his example). Here's a stateful codepen example of disabling an item and conditionally rendering another: codepen.io/kjscott27/pen/ExPpGZb

Collectives™ on Stack Overflow

REACT - Switch case statement breaks

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related