React- fade in and fade out

Question

I am new to react - I'm sure this is a simple problem but I am having a lot of trouble figuring out a solution.

So I have two buttons. Onclick on first button it should open fade in and if i click on the same button(button1) or if I click on the button(button2) it should fade out. same for the button2. so far I managed to figure it out how fade in works but not able to work out on fade out.

import React, { Component } from 'react'
import { Jumbotron, Grid, Row, Col, Image, Button, Carousel,Fade,Well } from 'react-bootstrap';
import './About.css';

export default class About extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      buttonPressed: false,
      buttonPressed1: false

      //open: false
    }
    
}

handleClick = (button) => {
  this.setState({ buttonPressed: button })
}
handleClick1 = (button) => {
  this.setState({ buttonPressed1: button })
}
  render() {
    return (
      <Grid>
      <button className='button1' onClick={() => this.handleClick({ open: !this.state.buttonPressed })}>
      BUTTON 1
           </button>
           <button className='button2' onClick={() => this.handleClick1({ open: !this.state.buttonPressed1 })}>
      BUTTON 2
           </button>
           <Fade class='fade1' in={this.state.buttonPressed}>
          <div>
            <Well>
             first
            </Well>
          </div>
        </Fade>
        <Fade class='fade2' in={this.state.buttonPressed1}>
          <div>
            <Well>
              second
            </Well>
          </div>
        </Fade>
      </Grid>

    )
  }
}

Please help with the about code.

Thanks in advance.

First screenshot

Second screnshot

Ok SO one problem I see is " && " needs a boolean input but its not boolean instead a object. Console log it as it contains open inside it — MontyGoldy, Jun 25 '18 at 03:19

score 1 · Accepted Answer · answered Jun 25 '18 at 03:45

You are passing an object not a boolean value to handleClick method. Here's how it should be:

handleClick = (button) => {
  this.setState({ buttonPressed: button.open })
}

handleClick1 = (button) => {
  this.setState({ buttonPressed1: button.open })
}

React- fade in and fade out

1 Answers1