If/then Render fails in React code

Question

I'm getting a Syntax error on the "if" statement in the code below. Am I crazy? I know its long, but it still returns a single root element, right?

      <tbody>
        {items.map((item, index) => (
          <tr key={index}>
            {if (tileView) {
              switch (header) {
              case "Items":
              (item.product.pictures[0]
              ? <td><img src={item.product.pictures[0].url} alt={item.name}/></td>
              : <td><Items/></td>)
              break;
              case "Accessories":
              (item.accessory.pictures[0]
              ? <td><img src={item.accessory.pictures[0].url} alt={item.name}/></td>
              : <td><Items/></td>)
              break;
              case "Add Ons":
              (item.add_on.pictures[0]
              ? <td><img src={item.add_on.pictures[0].url} alt={item.name}/></td>
              : <td><Items/></td>)
              break;
              default:
              break;
            }}}
            <td>{item.name}</td>
            <td>{item.quantity}</td>
            <td>
              <FormattedNumber
                value={item.selectedPrice ? item.selectedPrice : 0}
                style="currency"
                currency="USD"
              />
            </td>
          </tr>
        ))}
      </tbody>

If I remove the default on the switch/case, I get the same thing. To be fair, this is probably my first time doing switch statements in React.

EDIT: ANSWER: Here's the final code. I created an object to index the right attribute: const HeaderToAttribute = { "Items": "product", "Accessories": "accessory", "Add Ons": "add_on" }

     <tbody>
        {items.map((item, index) => (
          <tr key={index}>
            { tileView &&
              (item[HeaderToAttribute[header]].pictures[0]
              ? <td><img src={item[HeaderToAttribute[header]].pictures[0].url} alt={item.name}/></td>
              : <td><Items/></td>)
            }
            <td>{item.name}</td>
            <td>{item.quantity}</td>
            <td>
              <FormattedNumber
                value={item.selectedPrice ? item.selectedPrice : 0}
                style="currency"
                currency="USD"
              />
            </td>
          </tr>
        ))}
      </tbody>

we can't use if-else inside jsx, check this: reactjs.cn/react/tips/if-else-in-JSX.html to use if-else put all that logic inside a function and call that function from render method. — Mayank Shukla
– Mayank Shukla, Commented Apr 28, 2017 at 20:05
hard to follow this long condition but it seems that you are not returning something in all cases — Sagiv b.g
– Sagiv b.g, Commented Apr 28, 2017 at 20:06
The problem with switch-case is that you are not retuning anything. In an if-else you can just put the object you want to return as the last statement and it will work without an explicit return. In a switch-case the last statement is a break, therefore you are not returning anything. You will have to replace (...); break; with an explicit return (...). — Sulthan
– Sulthan, Commented Apr 28, 2017 at 20:14

Mayank Shukla · Accepted Answer · 2017-04-28 20:22:41Z

We can't use if-else inside JSX, to use these condition call a function from render method and put all the logic inside that. Don't forgot to return the element if contion matches to any case.

why we can't use if-else in JSX?

Check the DOC.

Use it like this:

<tbody>
   {items.map((item, index) => (
      <tr key={index}>
         {
           tileView && this._renderElement(item, header)
         }
         <td>{item.name}</td>
         <td>{item.quantity}</td>
         <td>
           <FormattedNumber
              value={item.selectedPrice ? item.selectedPrice : 0}
              style="currency"
              currency="USD"
            />
         </td>
       </tr>
  ))}
</tbody>

Define the _renderElement like this:

_renderElement(item, header){
    switch (header) {
         case "Items": return item.product.pictures[0] ? 
                      <td>
                        <img src={item.product.pictures[0].url} alt={item.name}/>
                      </td>
                      : <td><Items/></td>
         case "Accessories": return item.accessory.pictures[0] ?
                    <td>
                      <img src={item.accessory.pictures[0].url} alt={item.name}/>
                    </td>
                    : <td><Items/></td>)
         case "Add Ons": return item.add_on.pictures[0] ?
                      <td>
                        <img src={item.add_on.pictures[0].url} alt={item.name}/>
                      </td>
                      : <td><Items/></td>
         default: return null;
    }
}

Collectives™ on Stack Overflow

If/then Render fails in React code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related