Write logic code inside tag

Question

I want to have a switch case statement inside Step tag to get a correct format message base on step number, but it always prompt error there.

The error says:

[ts] Expression expected

export const MainBoxHeader = props => (
  <Row style={{ marginBottom: 12 }} gutter={100}>
    <Col span={8}>
      <BackButton
        style={{ visibility: props.backButtonIsHidden ? 'hidden' : 'visible' }}
        onClick={props.onClickBack}
      >
        <FormattedMessage id="back" />
      </BackButton>
    </Col>
    <Col span={8}>
      <Step>
        <FormattedMessage id={`SE-196.PopUp${(props.step)}.Step`} />
      </Step>
    </Col>
    <Col span={8}>
      <ColorBtn color="purple" onClick={props.onClickNext}>
        <FormattedMessage id="continue" />
      </ColorBtn>
    </Col>
  </Row>
);

Please elaborate further on your question. What is it you're trying to to? What is the error? Does this switch need to be inside the `Step` component or the `MainBoxHeader` component? — Dom, Mar 12 '18 at 04:48
Hi @DominikJanković, I update the picture, I think it would be easy to understand what I need. — Twitter khuong291, Mar 12 '18 at 04:51
Please do not supply only images of code please post the actual code in the answer in addition to an image if relevant — Aluan Haddad, Mar 12 '18 at 04:59
Check this one: https://stackoverflow.com/a/46593006/9454740 — Jorge Altieri, Mar 12 '18 at 05:05
Is it just me or the content of the code now looks different from the image posted before? — hasen, Mar 12 '18 at 06:11

Sangram Badi · Accepted Answer · 2018-03-12T05:05:00.453

2

Try below syntax

<Step>
    {(() => {
        switch(...) {}
    })()}
</Step>

Here you need to return the value.

OR

You can use

renderSwitch(param) {
  switch(param) {
    case 'foo':
      return 'bar';
    default:
      return 'foo';
  }
}

render() {
  return (
    <Step>
      {this.renderSwitch(param)}
     </Step> 
  );
}

Here you can use a function where you can write the switch case and use it in your render statement

edited Mar 12 '18 at 05:05

answered Mar 12 '18 at 04:54

Sangram Badi

4,054
9
45
78

This is correct but you should explain is that the cases need to use `return` instead of `break` as well – Aluan Haddad Mar 12 '18 at 04:57
@AluanHaddad can you check my answer now – Sangram Badi Mar 12 '18 at 05:06
Thanks, but it says undefined when I get props.step, how to cast it as number? – Twitter khuong291 Mar 12 '18 at 05:12
can you console your pops ? – Sangram Badi Mar 12 '18 at 05:14
It gives me "PopUpundefined.Step" – Twitter khuong291 Mar 12 '18 at 05:19
i think you don't have Step key inside your props – Sangram Badi Mar 12 '18 at 05:21
i think you are not passing Step from your parent component – Sangram Badi Mar 12 '18 at 05:22
@SangramBadi, yes, you're right. Now it works. Thanks. – Twitter khuong291 Mar 12 '18 at 05:23
happy to help you. i am upvoting you – Sangram Badi Mar 12 '18 at 05:23

score 2 · Answer 2 · answered Mar 12 '18 at 05:03

2

Sangram's soultion will work, but you could use template literals and do away with the switch alltogether. Or extract the switch into a function and reference it in your functional component - both solutions would, IMHO, be cleaner.

For example:

export const MainBoxHeader = props => (
  // ...
  <Step>
    <FormattedMessage id={`PopUp${props.step}.Step`} />
  </Step>
  // ...
)

Or

const getFormattedMessage = step => (
  switch (step) {
    case 1:
      return <FormattedMessage ... />
  }
)

export const MainBoxHeader = props => (
  // ...
  <Step>
    {getFormattedMessage(props.step)}
  </Step>
  // ...
)

Or maybe think about if that logic would be better suited for the step component itself, where you would pass Step a prop such as <Step stepId={props.step} /> and handle the rendering logic inside Step itself. Of course, you might have a valid reason not to to that and could use any of the above solutions instead.

Hope I helped.

answered Mar 12 '18 at 05:03

Dom

1,776
14
14

Thanks, but it says undefined when I get props.step, how to cast it as number? – Twitter khuong291 Mar 12 '18 at 05:12
Did you pass a `step` prop to `MainBoxHeader`? – Dom Mar 12 '18 at 05:13
yes I pass step equal to 1. – Twitter khuong291 Mar 12 '18 at 05:14
1

Update your question with the component that renders `MainBoxHeader` so we can see what's going on exactly. If you're passing everything correctly, `step` shouldn't be undefined in your functional component's `props`. – Dom Mar 12 '18 at 05:15

hasen · Answer 3 · 2018-03-12T05:57:41.077

1

Put the logic outside the return JSX and store the result to a local variable, and then embed it in the return JSX.

var stepNode = null; // some sensible default in case of unexpected input; depends on what you want to happen in your situation.

if (props.step == 1) {
    stepNode = <Something ...>
} else if (props.step == 2) {
    stepNode = <Something-Else ....>
}
return (<TheJSX>
            ....
                <Div> { stepNode } </Div>
            .....
       </TheJSX>);

EDIT:

Regarding the default value, you have to consider what should happen if the input does not match what you expect, e.g. say props.step is set to 4.

I believe React just ignores null values, but I could be mistaken. Depending on your situation, you might want to log an error or show something entirely different.

edited Mar 12 '18 at 05:57

answered Mar 12 '18 at 05:13

hasen

161,647
65
194
231

The use of `null` is pointless and it prevents the type system from providing definite assignment errors in this case because the variable always has a value. This wasn't doesn't really answer the question and it's poorly formatted – Aluan Haddad Mar 12 '18 at 05:18
null is not pointless because his switch statement only covers values 1 and 2; what if `props.step` has the value 34? – hasen Mar 12 '18 at 05:46
it would be better to not specify an initial value and to handle the absence explicitly. Specifically, what I'm objecting to is the use of an initial assignment prevents the compiler from doing definitely assignment analysis. `let stepNode` is correct – Aluan Haddad Mar 12 '18 at 05:48
The compiler will tell you not all paths assign a value, so you should fix it by assigning some default sensible value when you see unexpected input. – hasen Mar 12 '18 at 05:50
The accepted answer, for example, calls a function, but that function will just return `undefined` in the case of unexpected values. How is that any better? – hasen Mar 12 '18 at 05:51
correct, but that whole point is that it won't tell you _because_ you gave it a default. – Aluan Haddad Mar 12 '18 at 05:51
So when it tells you, what do you do? Giving a default is the _fix_ for the warning you want the compiler to show. – hasen Mar 12 '18 at 05:52
Regarding `undefined`, I think it is preferable to `null` because the former is always a possibility while the latter introduces an additional possible type – Aluan Haddad Mar 12 '18 at 05:53
Uhm, no, it's not preferable, I don't even know what you could possibly be thinking. Plus, the point of the answer is to give an example, because I don't know the context in which the OP is working in. – hasen Mar 12 '18 at 05:55
I'll remove my down vote because the difference is somewhat stylistic but I dislike this approach – Aluan Haddad Mar 12 '18 at 06:03
Thanks. I dislike many approaches people take but I don't try to enforce my approach. What matters is whether the code works or not. – hasen Mar 12 '18 at 06:11
Is there any ESLint rule to detect this? – Rafael Rozon May 11 '22 at 00:23

Write logic code inside tag

3 Answers3