Problems with rendering a component on click

Question

I'm trying to display a page within the Home page, so to speak, by clicking a link in a navigation bar that then displays a "square" of information without leaving the Home page. This is my Home:

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

export default class Home extends Component {

    var Music = React.createClass({
        render: function() {
            return (
                <div>
                    <h2> BBB </h2>
                </div>
            );

        }
    });


    render() {
        return (
            <div className='Home' id='Home'>
                <div id='musicMenu'>
                    <ul>
                        <li id="music"><Link to="/music">Music</Link></li>
                        <li id="shows"><Link to="/shows">Shows</Link></li>
                        <li id="collections"><Link to="/collections">Collections</Link></li>
                    </ul>
                </div>
            </div>
        );
    }
}

This is my app.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, hashHistory } from 'react-router';

import App from 'views/App';
import Home from 'views/Home';
import About from 'views/About';
import Cart from 'views/webcart';
import Music from 'views/music';
import Shows from 'views/shows';
import Collections from 'views/collections';



ReactDOM.render(
  <Router history={ hashHistory }>
    <Route path='/' component={ App }>
      <IndexRoute component={ Home } />
      <Route path='about' component={ About } />
      <Route path='Cart' component={ Cart } />
      <Route path='music' component={ Music } />
      <Route path='shows' component={ Shows } />
      <Route path='collections' component={ Collections } />
    </Route>
  </Router>,
  document.getElementById('app') // eslint-disable-line
);

The error I'm getting in Webpack is

 ERROR in ./js/views/Home.js
Module build failed: SyntaxError: Unexpected token, expected

and points to var Music . How can I fix this error? Also, is this the best way to do this or can anyone recommend a better way?

Answer 1

You can't have a var within the Home class. That's not allowed in JS . Move it outside just below the imports .

Also the square you want to display is this component?

<div>
   <h2> BBB </h2>
</div>

Add a CSS class called .invisible like this

.invisible{
   display:none;
}

And then in the home state do something like

this.state = {
    showSquare:false
}

And in the render

   <div className='Home' id='Home'>
            <div className={this.state.showSquare?'':'invisible'}>
              <h2> BBB </h2>
            </div>
            <div id='musicMenu'>
                 <ul>
                   <li id="music"><Link to="/music">Music</Link></li>
                   <li id="shows"><Link to="/shows">Shows</Link></li>
                   <li id="collections"><Link to="/collections">Collections</Link></li>
                 </ul>
             </div>
   </div>

What this does is make the square invisible when this.state.showSquare is false. Then in the navigation bar add a click handler which changes the state.showSquare

<li onClick={this.toggleShowSquare}>Show Square</li>

where toggleShowSquare() is

toggleShowSquare(){
   this.setState((prevState)=>({showSquare:!prevState.showSquare}))
}

Remember to do a

this.toggleShowSquare = this.toggleShowSquare.bind(this) in the constructor

EDIT : Replying to comment. For multiple divs do this

this.state = {
        showSquareOne:false,
        showSquareTwo:false
   }

Then have the divs like this

<div className={this.state.showSquareOne?'':'invisible'}></div>
<div className={this.state.showSquareTwo?'':'invisible'}></div>

The li elements like this

<li onClick={()=>this.toggleShowSquare('showSquareOne')}>Show Square One</li>
<li onClick={()=>this.toggleShowSquare('showSquareTwo')}>Show Square Two</li>

And the function like this

 toggleShowSquare(property){
       this.setState((prevState)=>({[property]:!prevState[property]}))
    }