CODEWITHSUNDEEP
reactjs
Thang Ho Minh
Thang Ho Minh

Reputation: 13

Hide components in reactjs

I have an album app created with React, I have 3 main js files: App.js, LeftMenu.js, RightContent.js. The LeftMenu.js contains all the code which related to the menu of the website, and I put a Reset button there. The RightContent.js contains all the material, albums, details of album. In App.js I have written in return like this:

render() {

return (
  <div>
  <LeftMenu   />
  <RightContent albumdata = {this.state.albumdata}
                getAlbumData = {this.getAlbumData}
                albumthumbnail = {this.state.albumthumbnail}
                getAlbumThumbnail = {this.getAlbumThumbnail}
  />
  </div>
);

}

In LeftMenu.js is these lines:

import React, { Component } from 'react'
import './LeftMenu.css'
import RightContent from './RightContent.js'

class LeftMenu extends Component {
    constructor(props){
        super(props);
    this.state = {
        RCVisible: true
    }
}
    render() {
        function ResetState() {
            this.setState(prevState => ({ RCVisible: !prevState.RCVisible }))
        }
        return (
            <div class="content">
                <div class="logo"></div>
            <a href="#" class="albumbutton">Albums</a>
                <div class="break"></div>
            <a href="#" class="resetbutton" onClick={ResetState}>Reset</a>

            </div>
        );
    }
}
export default LeftMenu;

and RightScreen.js is the bunch of codes related to the album thingy.

The problem is that I would like to have the button on LeftMenu.js name "Reset" so that when it is clicked the RightContent.js will be hidden so that on the page just have the menu left. I have tried finding solutions on here but nothing gave me the direction.

Upvotes: 0

Views: 401

Answers (1)

weibenfalk
weibenfalk

Reputation: 892

You should move your state up from the LeftMenu.js to your App.j component. Also move the callback function ResetState() to the App.js. You then send down your callback function to the LeftMenu component as a prop to use.

That way you can set the state in the App and render the RightScreen component depending on the state with a conditional logic.

Upvotes: 1

Related Questions