React: index.js:1452 Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

Created on 17 Dec 2018  路  2Comments  路  Source: facebook/react

Hello everyone!. I am new user to ReactJS. Please help me!. I have some problems with error description as above. Actually I want to use nested inside . So Do we have good solution to prove this issue or not?
My code:

return (
            <React.Fragment>
              {
                data.product_discount_v.map(x =>
                  <div key={x.id} className="col-sm-6 col-lg-4">
                    <Link to={{ pathname: "/deal/" + x.id }}>
                      <div className="deal-single panel c-card">
                        <figure className="deal-thumbnail embed-responsive embed-responsive-16by9">
                          <img alt="" src={x.img}></img>
                          <div className="label-discount left-20 top-15">{x.discount_percentage}</div>
                          <div className="time-left bottom-15 right-20 font-md-14">
                            <span>
                              <i className="ico fa fa-clock-o mr-10"></i>
                              <CountDown date={x.to_date}></CountDown>
                            </span>
                          </div>
                          <div className="deal-store-logo">
                            <img src="assets/images/brands/brand_01.jpg" alt=""></img>
                          </div>
                        </figure>
                        <div className="bg-white pt-20 pl-20 pr-15">
                          <div className="pr-md-10">
                            <h3 className="deal-title mb-10">
                              <Link to={{ pathname: "/deal" + x.id }}>{x.product_name}</Link>
                            </h3>
                            <ul className="deal-meta list-inline mb-10 color-mid">
                              <li><i className="ico fa fa-map-marker mr-10"></i>United State</li>
                              <li><i className="ico fa fa-shopping-basket mr-10"></i>120 Bought</li>
                            </ul>
                            <p className="text-muted mb-20">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam numquam nostrum.</p>
                          </div>
                          <div className="deal-price pos-r mb-15">
                            <h3 className="price ptb-5 text-right"><span className="price-sale">$300.00</span>$150.00</h3>
                          </div>
                        </div>
                      </div>
                    </Link>
                  </div>
                )
              }
            </React.Fragment>
          )
Support Redirect

Most helpful comment

You need to move the nested Link outside because HTML doesn't allow nested a element.

All 2 comments

You need to move the nested Link outside because HTML doesn't allow nested a element.

We use the issue tracker for bug reports and feature requests.

If you have a question, please check our community support resources:
https://facebook.github.io/react/community/support.html

Was this page helpful?
0 / 5 - 0 ratings