Learner Learner - 2 months ago 9
React JSX Question

Removing console.log throws an error

I have an app which is built using reactjs and react-mdl. There is a tab show info, episodes, and cast. When episode is clicked John, Jane in header should be changed to other text and so 55 episodes plus other content that is beneath the tab. The code that i coded works what i want but i think its not the proper way and there is a bug. I know its my fault but dont know how could i solve it.

class MovieDetailView extends Component{
constructor(props){
super(props);
this.state = {
movie:[ ],
activeTab:1
}
}

render(){
console.log("Tab ID: ", this.state.activeTab);
let movie = this.state.movie;
const mainCastJoin = _.join(movie.mainCast, ', ');
if(!this.state.movie){
return(
<p>Loading</p>
);
}

else{
return(
<div className="demo-big-content">
<Layout fixedHeader fixedTabs>
<Header>
{this.state.activeTab >= 0 ? <HeaderComponent movie={this.state.movie} activeTab={this.state.activeTab}/> : ' '}
<HeaderTabs ripple activeTab={this.state.activeTab} onChange={(tabId) => this.setState({ activeTab: tabId })}>
<Tab>SHOW INFO</Tab>
<Tab>EPISODES</Tab>
<Tab>CAST</Tab>
</HeaderTabs>
<Link to="/"><i className="material-icons arrow_back">arrow_back</i></Link>
</Header>
<Content>
<div className="page-content">{this.state.activeTab >=0 ? <MovieInfo movie={this.state.movie} activeTab={this.state.activeTab} /> : ''}</div>
</Content>
</Layout>
</div>
);
}
}
}

export default MovieDetailView;


HeaderComponent.js

const HeaderComponent = ({activeTab, movie}) => {
const mainCastJoin = _.join(movie.mainCast, ', ');
const renderHeader =
console.log('kk');
if(activeTab === 0){
return(
<div>
<HeaderRow title={movie.title}>
<IconButton name="more_vert" id="demo-menu-lower-left" />
</HeaderRow>
<HeaderRow>
<i className="material-icons">date_range</i>&nbsp;{mainCastJoin}
</HeaderRow>
<HeaderRow>
<i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 -
</HeaderRow>
</div>
);
}

if(activeTab === 1){
return(
<div>
<HeaderRow title={movie.title}>
<IconButton name="more_vert" id="demo-menu-lower-left" />
</HeaderRow>
<HeaderRow>
<i className="material-icons">date_range</i>&nbsp;episode
</HeaderRow>
<HeaderRow>
<i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 -
</HeaderRow>
</div>
)
}

if(activeTab === 2){
return(
<div>
<HeaderRow title={movie.title}>
<IconButton name="more_vert" id="demo-menu-lower-left" />
</HeaderRow>
<HeaderRow>
<i className="material-icons">date_range</i>&nbsp;main cast
</HeaderRow>
<HeaderRow>
<i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 -
</HeaderRow>
</div>
)
}

return(
<div>{renderHeader}</div>
)
}

export default HeaderComponent;


This code works but if i remove console.log then i get an error

Error in ./src/component/HeaderComponent.js
Syntax error: Unexpected token (10:4)

const renderHeader =
// console.log('kk');
if(activeTab === 0){
^
return(
<div>
<HeaderRow title={movie.title}>


How can i solve this? Why is it causing an error? What is the efficient way to solve such problem?

UPDATE

let renderHeader = () => ({
return(
if(activeTab === 0){
return(
<div>
<HeaderRow title={movie.title}>
<IconButton name="more_vert" id="demo-menu-lower-left" />
</HeaderRow>
<HeaderRow>
<i className="material-icons">date_range</i>&nbsp;{mainCastJoin}
</HeaderRow>
<HeaderRow>
<i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 -
</HeaderRow>
</div>
);
}

if(activeTab === 1){
return(
<div>
<HeaderRow title={movie.title}>
<IconButton name="more_vert" id="demo-menu-lower-left" />
</HeaderRow>
<HeaderRow>
<i className="material-icons">date_range</i>&nbsp;episode
</HeaderRow>
<HeaderRow>
<i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 -
</HeaderRow>
</div>
)
})
}


Rectifying the above code does not yield any output. It rather gives new error{this.renderHeader()}

const renderHeader = () => ({
if(activeTab === 0){
^
return(
<div>
<HeaderRow title={movie.title}>

Answer

You have to have something after an assignment operator (=) that can be assigned to the variable (or constant in this case).

In the working code, you are assigning the return value of console.log().

In the broken code, you've attempted to put an if statement there.