texi rv texi rv - 2 months ago 9
CSS Question

.sports-changed-status should be changed to .sports-last-second

  • I am new to Reactjs.

  • If the staus is active. I need to update the p tag and need to update in my

  • .sports-changed-status
    should be changed to

  • I have created a if condition but not sure how to insert.

  • Can you guys tell how to do it.

  • Providng my code below.

    newContentAdded: function () {

    var firstTab = 'got-the-value';

    if (firstTab == 'got-the-value')
    <p> got-the-value got-the-value got-the-value got-the-value </p>


From what I can tell, you already have all the necessary code to do this.

var isActive = this.state.selected === index;

You have this line to determine if your tab is active. You then use the next to lines of code to set context based on the value:

var activeClass = (isActive ? 'active' : '');
var content = isActive ? this.props.children[this.state.selected] : null;

You can apply something similar to what you've done with content and activeClass. Take a look at how you implement them.

return (
    <li role="presentation" key={index} className={child.props.liClass}>
        <a href="#" 
        className={`sports-tab-header ${activeClass}`} // <== Adds active class
        onClick={this.handleClick.bind(this, index)}>
        <p className="sports-subtitle">{child.props.subtitle}</p>

      <div className="tabs__content">
        {content} // <== Adds content only if active


So changing the content of the <p> tag would be just a small change:

var newContent = <span>Hello</span>;
var pContent = isActive ? newContent : child.props.subtitle;

// Use the pContent variable instead of child.props.subtitle
<p className="sports-subtitle">{pContent}</p>

Updated JSFiddle

The modification of the className will be the same as how this line is handled with activeClass:

className={`sports-tab-header ${activeClass}`}

That should be simple enough to handle.