How to create a new element with reactjs?-CodePudding

With reactjs, I want to write the code that shows a preview of the clicked image at the bottom when an image is clicked. How can I write a function for this that will show a preview of the image when it is clicked?

 <React.Fragment>
      <div className={`step step-3`} ref={divRef}>
        <div className="atrium">
          <span>Paketler</span>
          </div>
          <div className="content">
          <div
            className="moreThenOne"
            area="collectionTitle"
            onClick={handleClick}
          >
            <img className="imgg" src={collection1} alt="ss" onClick={handleImageClick} />
            <div className='price'>
              <span className='subPrice'> GOLD AİLE PAKETİ</span>
              <span >1.200 TL</span>
            </div>
          </div>
          <div
            className="moreThenOne"
            area="collectionTitle"
            onClick={handleClick}
          >
            <img className="imgg" src={collection2} alt="ss" />
            <div className='price'>
              <span className='subPrice'> GOLD AİLE PAKETİ</span>
              <span >1.200 TL</span>
            </div>
          </div>
          <div
            className="moreThenOne"
            area="collectionTitle"
            onClick={handleClick}
          >
            <img className="imgg" src={collection3} alt="ss" />
            <div className='price'>
              <span className='subPrice'> GOLD AİLE PAKETİ</span>
              <span>1.200 TL</span>
            </div>

     </div>
     <div className='preview-title'>
      <h5> PREVİEW</h5>
     </div>
     </div>
     </div>
    </React.Fragment>

I have this code. When the imageis clicked, I want to show the preview of the image at the bottom of the div that says "preview-title".

CodePudding user response：

Just with a toggle state and conditionally show and hide the content when the image clicked.

Example

function func() {
const [showPreview, setShowPreview] = useState(false);
const handleClick = () => setShowPreview(prev => !prev)

return (<React.Fragment>
      <div className={`step step-3`} ref={divRef}>
        <div className="atrium">
          <span>Paketler</span>
          </div>
          <div className="content">
          <div
            className="moreThenOne"
            area="collectionTitle"
            onClick={handleClick}
          >
            <img className="imgg" src={collection1} alt="ss" onClick={handleImageClick} />
            <div className='price'>
              <span className='subPrice'> GOLD AİLE PAKETİ</span>
              <span >1.200 TL</span>
            </div>
          </div>
          <div
            className="moreThenOne"
            area="collectionTitle"
            onClick={handleClick}
          >
            <img className="imgg" src={collection2} alt="ss" />
            <div className='price'>
              <span className='subPrice'> GOLD AİLE PAKETİ</span>
              <span >1.200 TL</span>
            </div>
          </div>
          <div
            className="moreThenOne"
            area="collectionTitle"
            onClick={handleClick}
          >
            <img className="imgg" src={collection3} alt="ss" />
            <div className='price'>
              <span className='subPrice'> GOLD AİLE PAKETİ</span>
              <span>1.200 TL</span>
            </div>

     </div>
     { showPreview && <div className='preview-title'>
      <h5> PREVİEW</h5>
     </div> }
     </div>
     </div>
    </React.Fragment>
)}