Toggle div-elements in different component in React

Question

I'm fairly new to React. I'm trying to build a site where you can click navigation item (in this case music genre) and it will list all the songs that belongs to that particular genre.

My app.js looks like this:

import React, { Component } from 'react';
import ListGenres  from './ListGenres';
import './App.css';


class App extends Component {
    constructor(props) {
      super();
      this.state = {dataList: props.dataList};
    }
    render() {
      return (
        <div>
          <div className="App">
            <Navigation tracks = {this.state.dataList} />
            <ListGenres tracks = {this.state.dataList}/>
          </div>
        </div>
     );
   }
}

export default App;

I have a navigation component that looks like this:

import React from 'react';
import HeaderBar  from './HeaderBar'; 
import MenuItem from 'material-ui/MenuItem';

export class Navigation extends React.Component {
constructor(props) {
    super();
}
/*
onClickFunction() {
    toggle elements in another component
}
*/
render() {
    const genres = this.props.tracks.map((elem) => {
        return elem.genre;
    });
    const filtered = genres.filter((elem, index, self) => {
      return self.indexOf(elem) === index;
    });
    const genreLoop = filtered.map((elem, i) => {
      return (
        <MenuItem 
            onClick= {this.onClickFunction}
            key={ i }><a>{ elem }</a>
        </MenuItem>);
    });
    return (
        <div>
            { genreLoop }
        </div>
    );
  }
}
export default Navigation;

My list of items are rendered in another component whick looks like this:

import React from 'react';
import './ListGenres.css';

export class ListGenres extends React.Component {
    constructor(props) {
    super();
}
render() {
    return (
        <div className="genreList">
            <div className="tracklist-visible tracklist-pop">
                <ul>
                    <h3>Pop</h3>
                    { this.tracklist('Pop') }   
                </ul>
            </div>
            <div className="tracklist-visible tracklist-metal">
                <ul>
                    <h3>Pop</h3>
                    { this.tracklist('Metal') } 
                </ul>
            </div>
        </div>
   );
}

Is there way to maybe add css-class to tracklist-div when anchor is clicked from Navigation-component? Looks like I can't pass any props from that component since it's "stand-alone"-component?

Answer 1

You need to lift the state up.

Of course, you can solve this with Redux too, but let's keep it simple and only use React.

Lifting State Up

Create a component that will contains both <Navigation /> and <ListGenres /> components.

Keep the state (genre and selectedGenre) in this parent component and pass it down through props.

You also need to create a callback to handle genres changes.

Here's the example:

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      selectedGenre: null,
      genres: [...]
    }
  }

  onGenreChange (genre) {
    this.setState({ selectedGenre: genre })
  }

  render () {
    return (
      <div>
        <Navigation
          onGenreChange={genre => this.onGenreChange(genre)}
          genres={this.state.genres}
        />
        <ListGenres
          genres={this.state.genres}
          selectedGenre={this.state.genres}
        />
      </div>
    )
  }
}