Can not open sheet-modal in react code


#1

I tried to use framework 7 react sheet-modal

<ListItem title="Settings" class="link sheet-open" href="#" data-sheet=".my-sheet"></ListItem>

here is my sheet-modal

  <div className="sheet-modal my-sheet">
    <div className="toolbar">
      <div className="toolbar-inner">
        <div className="left"></div>
        {/*<div className="right"><a className="link sheet-close" href="#">Done</a></div>*/}
      </div>
    </div>
    <div className="sheet-modal-inner">
      <div className="block">
        <h4>Info</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam ac quam euismod porta vel a nunc. Quisque sodales scelerisque est, at porta justo cursus ac.</p>
      </div>
    </div>
  </div>

I also tried class=“sheet-open” or className=“sheet-open” but didnt work.


#2

Use sheetOpen attribute instead! http://framework7.io/react/list-item.html#list-item-properties


#3

Or use declarative way of setting opened prop on action sheet, or use API http://framework7.io/react/action-sheet.html#examples