Transitioning CSS background on React component on Button click

Question

I am trying to have a center div background color transition each time the "New Quote" button is clicked and a new quote generated. I am having trouble 1. with setting the transition to this div. I would like to have a set of 5 colors that the div will transition to in order. Can this be an array of css colors? Not sure how to go about this. I am also not sure how to link this transition to the button click event.

Button Component:

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showComponent: true,
      cardColor: true,
      backgroundColor: true
    };
    this.onButtonClick = this.onButtonClick.bind(this);
  }
  onButtonClick() {
    this.setState({
      showComponent: true,
      cardColor: true,
      backgroundColor: true
    });
  }
  render(){
    return(
    <div>
    <button onClick={this.onButtonClick} type='button' class='btn btn-primary' 
    style={{
      position: 'absolute',
      right: '10px',
      bottom: '10px',
      padding: '2%'
    }}>New Quote</button>
    {this.state.showComponent ? <AuthorQuotePrint props={QUOTES}/> : null}
    </div>
    )
  }
}

Quote Box Div:

class RandomQuoteBox extends React.Component{
    render(){
      const myStyle={
        backgroundColor: 'red',
                  width: '500px',
                  height: '300px',
                  margin: '0 auto'
      };
      return(
        <div class="container">
            <div class="row">
              <div class="col">
              </div>
              <div class="col-8">
                  <div class="card" style={myStyle}> 
                    <div>
                      <Button />
                    </div>
                  </div>
                </div>
              <div class="col">
                </div>
            </div>
          </div>
        );
    }
}

Yevhen Horbunkov · Accepted Answer · 2020-03-13 16:27:01Z

1

I assume hereafter <RandomQuoteBox /> and <Button /> components have common parent.

With that you may attach onClick event within <Button /> component to callback within common parent (e.g. <QuoteForm />), which modifies parent state variable corresponding to currently applied color index within <RandomQuoteBox />

Consider the live-demo below, which I tried to adapt to your use case and tried to keep distilled at the same time:

const { render } = ReactDOM,
      rootNode = document.getElementById('root')

class AuthorQuotePrint extends React.Component {
  render(){
   return <div>{this.props.quote}</div>
  }
}

class Button extends React.Component {
  render(){
    return(
      <div>
        <button onClick={this.props.onNextQuote}>Next Quote</button>
        <AuthorQuotePrint quote={this.props.quote} />
      </div>
    )
  }
}

class RandomQuoteBox extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      quotes: ['Some quote', 'Some other quote', 'Just one more quote', 'Yet another quote', 'This one is quote too'],
      colors: ['red', 'green', 'blue', 'purple', 'black']
    }
    this.state = {
      ...this.state,
      currentQuoteIdx: Math.random()*this.state.quotes.length|0,
      currentColorIdx: 0
    }
    this.onNextQuote = this.onNextQuote.bind(this)
  }
  
  onNextQuote(){
    const nextQuoteIdxShift = 0|Math.random()*this.state.quotes.length || 1,
          nextQuoteIdx = (this.state.currentQuoteIdx+nextQuoteIdxShift)%this.state.quotes.length
    this.setState({
      currentQuoteIdx: nextQuoteIdx,
      currentColorIdx: (this.state.currentColorIdx+1)%this.state.colors.length
    })
  }
  
  render(){
    return(
      <div 
        style={{
          backgroundColor:this.state.colors[this.state.currentColorIdx], 
          color: '#fff',
          width: 200
        }}
       >
        <Button
          onNextQuote={this.onNextQuote}
          quote={this.state.quotes[this.state.currentQuoteIdx]}
        />
      </div>
    )
  }
}

render(<RandomQuoteBox />, rootNode)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

edited Mar 13, 2020 at 16:27

answered Mar 12, 2020 at 12:17

Yevhen Horbunkov

15.6k3 gold badges27 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

travelerrrrrrr Over a year ago

your solutions does provide the correct functionality it seems, thank you. I am having trouble linking color change to when a new quote is generated. I am not looking for the <button> to change color, its the <div>. I tried <div class="card" onChange={onSwitchColor} style={{ backgroundColor: colors[currentColorIdx]}}> which did not work. I also tried placing the onButtonClick directly in the child button component: <Button onButtonClick={onSwitchColor}/> this did not work either.

Yevhen Horbunkov Over a year ago

@travelerr11 : Consider updated version of my answer it looks a bit closer to your use case, while implementing same concept

Collectives™ on Stack Overflow

Transitioning CSS background on React component on Button click

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related