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


  • i new reactjs.
  • if staus active. need update p tag , need update in liclass .sports-last-second
  • .sports-changed-status should changed .sports-last-second
  • i have created if condition not sure how insert.
  • can guys tell how it.
  • providng 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 can tell, have necessary code this.

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

you have line determine if tab active. use next lines of code set context based on value:

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

you can apply similar you've done content , activeclass. take @ how 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 if active       </div>      </li>   ); 

so changing content of <p> tag small change:

var newcontent = <span>hello</span>; var pcontent = isactive ? newcontent : child.props.subtitle; ...  // use pcontent variable instead of child.props.subtitle <p classname="sports-subtitle">{pcontent}</p> 

updated jsfiddle

the modification of classname same how line handled activeclass:

.... classname={`sports-tab-header ${activeclass}`} 

that should simple enough handle.


Comments

Popular posts from this blog

sql server - Cannot query correctly (MSSQL - PHP - JSON) -

php - trouble displaying mysqli database results in correct order -

C++ Linked List -