React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by Ravindra Athreya

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.comment-container {
  display : flex;
  flex-direction: column;
  border : 1px solid #cccccc;
  border-radius: 5px;
  padding: 0.75rem;
  height:100px;
  overflow: auto;
}
.set-height {
  height: 250px !important;
}
.created-by {
  font-weight: bold;
}

.created-date {
  color: #08f;
  font-weight: bold;
  padding-left: 0.25rem;
}

.comment-details {
  padding-bottom: 0.25rem;
}

.comments {
  border-bottom: 1px dashed #cccccc;
  margin-top: 10px
}
div.comments:last-child {
  border-bottom: none;
}

.comments-expand {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.toggle-button {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  position: sticky;
  bottom: 1px;
  right: 1px;
}

Babel + JSX

/* class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
); */

class Comments extends React.Component {
constructor(props) {
	super(props);
  this.expandHandler= this.expandHandler.bind(this);
  this.state = {
  	active: false
  }
}

expandHandler() {
	const currentState = this.state.active;
  this.setState({ active: !currentState });
}

	render() {
  const comments = this.props.comments;
  	return (
    <div>
      
    
    <div
    className={`comment-container ${this.state.active ? 'set-height': ''}`}>
  	  {comments.map((c, index) => {
      return(
      <div className="comments" key={index}>
        <div className="created-details">
          <span className="created-by">{c.createdBy}</span>
          <span className="created-date">on {c.createdDate}</span>
          </div>
          <div className="comment-details">
            {c.comments}
          </div>
        </div>
      );
      	
      })}
     
  	</div>
     <div class="toggle-button">
        <button onClick={this.expandHandler}>{this.state.active ? 'Collapse': 'Expand'}</button>
      </div>
    </div>
    )
  }
}

const comments = [
        {
          comments: "Licensor Pricing Model Approved",
          createdBy: "BA",
          createdDate: 1579606253000
        },
        {
          comments: "Licensor Pricing Model Approved",
          createdBy: "FA",
          createdDate: 1579606253000
        },
        {
          comments: "Licensor Pricing Model Approved",
          createdBy: "FA",
          createdDate: 1579606253000
        },
        {
          comments: "Licensor Pricing Model Approved",
          createdBy: "FA",
          createdDate: 1579606253000
        },
        {
          comments: "Licensor Pricing Model Approved",
          createdBy: "FA",
          createdDate: 1579606253000
        },
        {
          comments: "Licensor...