texi rv texi rv - 11 days ago 4
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
    liClass
    as
    .sports-last-second

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

  • 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>
    }
    }


Answer

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)}>
        <h2>{child.props.label}</h2>
        <p className="sports-subtitle">{child.props.subtitle}</p>
      </a>

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

    </li>
  );

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.

Comments