Tim Roberts Tim Roberts - 6 months ago 11
Javascript Question

React re-rendering but not displaying correct component

I have a

Profile
component that should render different components depending on user action (a click of an a tag). I have the information being passed and the correct component's state being updated. However, when the
Profile
component is re-rendered, it still rendered the same component, not the newly selected one.

class Profile extends Component {
constructor(props){
super(props);
this.state = {
currentComponent: 'sales'
}

this.changeComponent = this.changeComponent.bind(this);
}

changeComponent(component){
console.log('You are trying to change component!');
console.log(this);
this.setState({currentComponent: component});
}

render(){
let component;
switch(this.state.currentComponent){
case 'sales':
component = <Sales />;
break;
case 'income':
component = <Income />;
default:
component = <Sales />;
}
const menuItems = [
{
text: 'Sales'
},
{
text: 'Team'
},
{
text: 'Income'
},
{
text: 'Edit'
}
]
console.log(this.state);
return <div id="profileWrap">
<div id="profileMenu">
<NavMenu menuItems={menuItems} currentComponent={this.state.currentComponent} changeComponent={this.changeComponent}/>
</div>
{component}
</div>
}
}


And my
Sales
/
Income
components are just

import React, {Component} from 'react';
import {Link} from 'react-router';

class Sales extends Component {
render(){
return(<h1>This is Sales!</h1>)
}
}

export default Sales;


with
Income
in place of
Sales
.

As you can see, inside of the
Profile
component, I am logging when I access that function along with what my worker thinks
this
is at that moment in time (both of which seem correct) and I am also logging the state out on re-render, which does show the correct state being used. Is it something with my switch statement?

Edit

After changing my switch statement to
if/elseif
statements, it all works. Why is it that the
switch
causes it not to update?

Answer

You're missing break in your switch statement:

  switch(this.state.currentComponent){
    case 'sales':
      component =  <Sales />;
      break;
    case 'income':
      component = <Income />;
      break; // <-- need this here or will fall through to default.
    default:
      component =  <Sales />;
  }

Update: You can also avoid this whole thing by adding the components to your menuItems array.

 this.state = { currentComponent: <Sales /> }

 ...

 const menuItems = [
    {
      text: 'Sales'
      component: <Sales />
    },
    ...
  ]

Then in render: { this.state.currentComponent }

Comments