truncate text in reactJS

Question

Hi I'm working in this reactJS component and I want to know if reactJS has capabilities to filter string contents:

var Album = React.createClass({
  rawMarkup: function() {
  var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
  return { __html: rawMarkup };
},

render: function() {

  return (
    <div className='col s12 m6 l4'>
       <div className='card'>
         <div className='card-image'>
            <img  style={{minHeight:'220px', maxHeight:'220px' }} src={this.props.image} />
         </div>
         <div className='card-content' style={{minHeight:'100px', maxHeight:'100px'}}>
          <span style={{overflow: 'hidden', textOverflow: 'ellipsis'}}>             
             {this.props.name}
          </span>
         </div>
         <div className='card-action'>
         </div>
        </div>          
      </div>
    );
  }
});

How can I truncate the text inside span tag??

regards

Answer 1

You can pass the prop to function and return the truncated version:

...

<span style={{overflow: 'hidden', textOverflow: 'ellipsis'}}>             
    {this.truncate(this.props.name)}
</span>

...

truncate: function(str) {
    return str.length > 10 ? str.substring(0, 7) + "..." : str;
}

Answer 2

{info.substring(0, 20)} {info.length >= 20 && '...'}