Есть ли способ
e.g
вместо этого у меня "продукт 1 - лучший в отрасли", я пробую этот "продукт 1 ..."
Это мой код:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { searchProducts, deleteProduct } from '../../actions';
import { Link } from 'react-router-dom';
const moment = require('moment');
class ProductList extends Component {
componentDidMount() {
this.props.searchProducts();
}
runFiles() {
return this.props.productList.map(product => {
return (
<tr key={product._id}>
<td style={{fontStyle: 'italic',fontWeight:'500'}}>{product.name}</td>
{/*IN THE FOLLOWING ONE LINE I WANT TO TRUNCATE DESCRIPTION*/}
<td style={{fontStyle: 'italic',fontWeight:'500'}}>{product.description}</td>
<td style={{fontStyle: 'italic',fontWeight:'500'}}>{product.brand}</td>
<td style={{fontStyle: 'italic',fontWeight:'500'}}>{product.price}</td>
<td style={{fontStyle: 'italic',fontWeight:'500'}}>{product.stock}</td>
<td style={{fontStyle: 'italic',fontWeight:'500'}}>{product.code}</td>
<td style={{fontStyle: 'italic',fontWeight:'500'}}>{producto.isPassedAway}</td>
<td style={{fontStyle: 'italic',fontWeight:'500'}}>
{moment(product.createdAt).format('DD-MM-YYYY HH:mm:ss')}</td>
<td style={{fontStyle: 'italic',fontWeight:'500'}}>
{moment(product.passedAwayAt).format('DD-MM-YYYY HH:mm:ss')}</td>
<td>
<Link to={`/products/${product._id}/show`} className='mr-2' style=
{{fontWeight:'bold',color:'blue'}}>
show
</Link>
<Link to={`/products/${product._id}/edit`} className='mr-2' style=
{{fontWeight:'bold',color:'blue'}}>
Edit
</Link>
<a
className='mr-2'
style={{fontWeight:'bold',color:'blue'}}
href='#more'
onClick={() => {
if (
window.confirm(
'¿Are you sure to want to delete the product?' + ' ' + product.name
)
)
this.props.deleteProduct(product._id);
}}
>
Delete
</a>
</td>
</tr>
);
});
}
render() {
return (
<div>
<h2><b>Listing products</b></h2>
<p>
<Link to='/products/new' className= 'btn btn-primary' style=
{{fontWeight:'bold',color:'black'}}>
New
</Link>
</p>
<div className='table-responsive'>
<table className='table table-sm'>
<thead className='thead-light'>
<tr>
<th style={{fontStyle: 'arial'}}>Name</th>
<th style={{fontStyle: 'arial'}}>Description</th>
<th style={{fontStyle: 'arial'}}>Brand</th>
<th style={{fontStyle: 'arial'}}>Price</th>
<th style={{fontStyle: 'arial'}}>Stock</th>
<th style={{fontStyle: 'arial'}}>Code</th>
<th style={{fontStyle: 'arial'}}>Is passed Away</th>
<th style={{fontStyle: 'arial'}}>Created At</th>
<th style={{fontStyle: 'arial'}}>Passed Away At</th>
<th style={{fontStyle: 'arial'}}>Actions</th>
</tr>
</thead>
<tbody>{this.runFiles()}</tbody>
</table>
</div>
</div>
);
}
}
function mapState(state) {
return {
productList: state.productsDs.productList
};
}
const actions = {
searchProducts,
deleteProduct
};
export default connect(
mapState,
actions
)(ProductList);
Мой productList, извлеченный для componentDidMount, выглядит следующим образом:
[product1:{name: "product 1",description:"the product 1 is biggest of the
factory"},...//OTHER FIELDS]
Я хочу что-то вроде этого:
product 1: {name: "product1", description: "the product 1..."//OTHER FIELDS,... }
in every description rows form each product I want to truncate text with ellipsis.
Я знаю, что возможно обрезать текст по определению часть из параграфа. Скажите prod1 ... вместо этого prod1 - лучший в отрасли.
Кто-нибудь, кто может решить эту проблему?