React not executing block of switch statement?

Question

I have a product component that renders n number of sections. The code in the product component:

let sections = this.state.product.sections.map((section, idx) => {
  return (
    <Section sectionType={section.id} section={section} />
  )
})

return (
  <div>
    {this.state.product.name}
    {sections}
  </div>
)

The code in the section component:

renderSection() {
 switch (this.props.sectionType) {
  case 'heroImage':
    return (
      <img src={image.url} />
    )
  case 'doublePane':
    this.props.section.items.map((item, idx) => {
      console.log(item.id);
      if (1 === 1) {
        return (
          <div>hi</div>
        )
      }
    })
  default:
    return (
      <div>hey there</div>
    )
}
}

render() {
  return (
    <div>
      {this.renderSection()}
    </div>
)
}

I added the 1===1 line just to make sure it would execute, but the output of my code is still

the heroImage case properly executes
the console log of item.id happens (so we definitely enter the doublePane block), but the code inside of the 1===1 block does not execute.

Any idea what's happening here to not allow me to run the code inside of the 1===1? Thanks in advance!

Your return is inside the .map() callback... nothing is being returned in the actual switch case — Patrick Evans
– Patrick Evans, Commented Mar 17, 2018 at 17:52
If the console.log(item.id) is executing then return ( <div>hi</div> ) also executed. The problem is you are returning inside .map(). — Spencer Wieczorek
– Spencer Wieczorek, Commented Mar 17, 2018 at 17:52

treyhakanson · Accepted Answer · 2018-03-17 17:55:21Z

2

You need to return the result of the mapping function, in addition to returning within the mapping function:

renderSection() {
  switch (this.props.sectionType) {
    case 'heroImage':
      return (
        <img src={image.url} />
      );
    case 'setOfTwo':
      return (
        <div>
          {this.props.section.items.map((item, idx) => {
             console.log(item.id);
             return (
               <div>hi</div>
             );
          })}
        </div>
      );
    default:
      return (
        <div>hey there</div>
      )
  }
}

Wrapping the return value in a div isn't necessarily required, but I prefer to return a consistent item (in this case a single JSX element) from functions.

answered Mar 17, 2018 at 17:55

treyhakanson

5,0112 gold badges20 silver badges35 bronze badges

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

Collectives™ on Stack Overflow

React not executing block of switch statement?

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