I hope you understand this simple example.

I tried to change the background color of my HTML element on first render by handling it in React Component with a bit help of jQuery.

This is the code inside my React Component (the props is passed from state of Parent Component):

class QuoteBox extends React.Component {
  constructor(props) {
    super(props)
  }
  
  
  componentDidMount() {
    $('#root').css('background-color', this.props.color); 
    $('#text').css('color', this.props.color);
    $('#author').css('color', this.props.color);
  }

  render() {   
    return (
      <div>
          <div id="quote-box" className="quote-box">
            <div className="quote">
              <span id="text" class="quote-text">{this.props.quote}</span>
            </div>
            <div id="author" className="quote-author">
              <span>- {this.props.author}</span>
            </div>
      </div>
    )
  }

The code inside componentDidMount() seem doesn't recognize the this.props.color. But if change to $('#root').css('background-color', 'green'); it's immediately change the background to green on first render.

But in render() it recognize another props.

So what did I do wrong? Is there a way to target HTML element using jQuery inside React?