https://i.sstatic.net/gSj3D.png
I am facing a situation where I have a list and need to render a box below a specific row when it is clicked. The challenge is to ensure that the other rows are shifted down accordingly. Is there any plugin that can help with this functionality?
Here is the render method of the InvestmentList component:
render() {
return (
<div>
<ul className="panel-list list-inline">
{this.state.list.length > 0 ?
this.state.list.map((item,index)=>{
return (
<li key={index}>
<div className="layout layout-1 fade-transition clearfix">
<div className="layout-header">
<div className="layout-img-ls">
<img src='https://s3.ap-south-1.amazonaws.com/waccal/static+icons/layout_50.png' />
</div>
<div className="layout-img-text pull-right">
<p >asas</p>
</div>
</div>
<div className="layout-content">
<h5>asasas</h5>
<a href="#">@adsd</a>
</div>
<div className="layout-footer">
<div className="dropdown">
<div className="wbtn-connected fade-transition"></div>
<i className="material-icons md-18 pull-right dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">more_vert</i>
<ul className="dropdown-menu wcl-sub-dropdown" aria-labelledby="dropdownMenu1">
<li><a href="#">Sold</a></li>
<li><a href="#">Remove</a></li>
</ul>
</div>
</div>
</div>
<div className=''>
</div>
</li>
)
})
: <div> No Search Results. <img src="img/noresult.emoji.png" className="emoji-img"/></div>}
</ul>
</div>
);
This is the parent div
<h5 className="wcl-main-heading">INVESTMENTS</h5>
<div className="wcl-panel">
<div className="wcl-panel-head">
<span className="text-left heading-wcpanel">CURRENT</span>
<button className="wcl-icon wcl-icon-gray popup-btn pull-right wcl-tooltip" data-toggle="modal" data-target="#add_investor" data-placement="bottom" title="ADD" onClick={()=>{
this.setState({
showAddInvestor:true
})
}}>
<i className="material-icons md-18" >add_circle_outline</i>
</button>
</div>
<InvestmentList list = {this.props.investors} setInvestor={this.setInvestor} showInvestor={this.showInvestor}/>
<AddInvestor markSold = {false} showAddInvestor={this.state.showAddInvestor} closeModal={this.closeModal}/>
</div>
{this.state.showInvestor?
<InvestmentInDetail showInvestor={this.showInvestor} investor={this.state.investor}/>
:null}
</div>
InvestmentList is the component which gets rendered after all the rows