height control of the element with React - reactjs

Question

Just started with the react and some simple things can get hard after years of jQuery
I want to render list of books and since the description is too long to display I want to limit the height of the div. onClick I want to display full description text and close it if clicked again.
like so: https://jsfiddle.net/nb1u1f9t/
Here is my function that renders books list:
renderBooks(){
return(
<div>
<h3>List of available books</h3>
<ul className="list-group">
{this.props.books.map((book)=>{
return (
<li key={book.id} className="list-group-item">
<div className="cover-img"><img src={book.cover_img} alt="" className="img-responsive" /></div>
<div className="book-info">
<ul className="list-group">
<li className="list-group-item active"><h4>Name: {book.name} </h4></li>
<li className="list-group-item">Pages: {book.pages_i}</li>
<li className="list-group-item">Genre: {book.genre_s}</li>
<li className="list-group-item">Price: {book.price}</li>
<li className="list-group-item">Description: <div className="description-frame">{renderHTML(book.description)}</div><div className="view-all" onClick={}>View All</div></li>
</ul>
</div>
</li>
);
})}
</ul>
</div>
);
I would appreciate the general idea how that can be accomplished in React style? I feel there should be something related to the state but cannot think of how to do that correctly. Plus not sure how the context for the specific book should be handled through the click event.

Answer 1

I would have two react components, BookList and Book.
Book would have a boolean value on its state to indicate whether it was expanded or not. It would also have an onClick handler which toggles the expanded state by calling this.setState({ expanded: !this.state.expanded })
Then it would just be up to book's render function to look at the state, and apply an additional CSS class for the case the book is not expanded, as per Kenneth's comment.

Answer 2

Adding a code in case somebody need the same solution
That is how my new code looks like:
component that renders books list:
import React, {Component} from 'react';
import BookDescription from './description_render';
export default class RenderBooks extends Component{
constructor(props){
super(props);
}
render(){
return(
<div>
<h3>List of available books</h3>
<ul className="list-group">
{this.props.books.map((book)=>{
return (
<li key={book.id} className="list-group-item">
<div className="cover-img"><img src={book.cover_img} alt="" className="img-responsive" /></div>
<div className="book-info">
<ul className="list-group">
<li className="list-group-item active"><h4>Name: {book.name} </h4></li>
<li className="list-group-item">Pages: {book.pages_i}</li>
<li className="list-group-item">Genre: {book.genre_s}</li>
<li className="list-group-item">Price: {book.price}</li>
<li className="list-group-item"><BookDescription description={book.description}></BookDescription></li>
</ul>
</div>
</li>
);
})}
</ul>
</div>
);
}
}
New component that holds state for the clicked book description
import React, {Component} from 'react';
import renderHTML from 'react-render-html';
export default class BookDescription extends Component{
constructor(props){
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleViewClick = this.handleViewClick.bind(this);
}
handleViewClick(){
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render(){
return(
<div>
Description: <div className={this.state.isToggleOn ? 'description-frame closed' : 'description-frame'}>{renderHTML(this.props.description)}</div><div className="view-all" onClick={this.handleViewClick}>{this.state.isToggleOn ? 'View All' : 'Close'}</div>
</div>
)
}
}