CODEWITHSUNDEEP
reactjshyperlinknavigationreact-router-dom
Stefan
Stefan

Reputation: 260

Warning: validateDOMNesting(…): <a> cannot appear as a descendant of <a>

I'm using React router dom Link component. It is basically twitter's home feed. I want to be able to have two type of Links in one div component. One will be Link to go to user's profile and other one to go to post. I am currently getting warning and couldn't find solution for now. Here is the screenshot as reference:

enter image description here

I understand the issue here, my post Link is the parent element and I've added two user Link components inside of it as the user should be able to access post page when he clicks on anything inside of the post except user's profile photo and user's name. Is there any smarter way of achieving this and keeping links like this?

Code:

{posts?.map((post) => (
          <Link
            className={classes.link}
            key={post.user.id}
            to={`/posts/${post.id}`}
          >
            <div className={classes.post}>
              <Link to={`/users/${post.user.id}`}>
                <img
                  className={classes.profileImage}
                  src={DefaultLogo}
                  alt="default-profile"
                />
              </Link>
              <article className={classes.postDetails}>
                <Link
                  className={classes.link}
                  to={`/users/${post.user.id}`}
                >
                  <Typography
                    variant="subtitle1"
                    className={`${classes.postTitle} ${classes.content}`}
                  >
                    {post.user.name}
                  </Typography>
                </Link>
                <Typography
                  variant="subtitle1"
                  className={`${classes.postText} ${classes.content}`}
                >
                  {post.body}
                </Typography>
              </article>
            </div>
          </Link>
        ))}

Upvotes: 4

Views: 8355

Answers (1)

rakesh shrestha
rakesh shrestha

Reputation: 1435

Yes, having anchor tags inside of another anchor tag is misleading a bad approach to doing things. But given your requirements you can make use of a basic button with react router dom history api.

A simple example:

import {Link, useHistory} from 'react-router-dom'

const App = () => {
  const history = useHistory()


  return (
     <a
      href='/user/1'
     >
       <h2>John doe</h2>
       <div>here are some use information</div>
       {/* Need to prevent the event bubbling */}     
       <Link role='link' to='/users/1/posts'>
           User posts
       </Link> 
     </div>
  )

}

Upvotes: 3

Related Questions