validateDOMNesting(...): <div> cannot appear as a child of <tr>. at div at TitleCell

[rajshah2399]

can anyone please help me with this, Thanks ..!!

in Title cell components before I implement my code, it's working fine with this code

import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import Breadcrumb from '../../../components/Breadcrumb';

const StyledTitle = styled.divcolor: #091219; font-size: 1.125rem; font-weight: Bold; width: max-content; max-width: 250px; white-space: pre-line;; const TypeRow = styled.divdisplay: flex; justify-content: space-between;; const TypeHeader = styled.h4margin-bottom: 0px;;

const TitleCell = ({ type, title, versionId }) => (

<TypeRow> <TypeHeader data-at="title-type-cell">{type}</TypeHeader> <Breadcrumb from="titlecell" versionId={versionId} /> </TypeRow> <StyledTitle data-at="title-header-cell">{title}</StyledTitle> );

TitleCell.propTypes = { type: PropTypes.string.isRequired, title: PropTypes.string.isRequired, versionId: PropTypes.string.isRequired, };

export default TitleCell;

but I need to add tag and add href into this so changed this code to

import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import { useStore } from 'react-redux'; import { useQuery } from '@apollo/client'; import { Button } from '@twigeducation/ts-fe-components'; import Breadcrumb from '../../../components/Breadcrumb'; import { breadcrumbsQuery } from '../../../components/Breadcrumb/Breadcrumbs.query';

const StyledTitle = styled.divcolor: #091219; font-size: 1.125rem; font-weight: Bold; width: max-content; max-width: 250px; white-space: pre-line;; const TypeRow = styled.divdisplay: flex; justify-content: space-between;; const TypeHeader = styled.h4margin-bottom: 0px;;

const BreadcrumbLink = styled.atext-decoration: inherit; color: inherit; cursor: pointer; &:visited{ text-decoration: inherit; color: inherit; cursor: pointer; } &:hover{ text-decoration: inherit; color: inherit; cursor: pointer; };

const TitleCell = ({ type, title, versionId }) => { const { subscriptions } = useStore().getState(); const { loading, data, error } = useQuery(breadcrumbsQuery, { variables: { applicationId: subscriptions?.product?.tocsApp, versionId, }, });

if (loading) {
    return <div data-at="loading" />;
}

if (error || !data.studentSession) {
    return null;
}
return (
    <table>
        <tbody>
            <td>
                <BreadcrumbLink
                    href={`/student-session/${data.studentSession.attributes.slug}/${btoa(
                        versionId,
                    )}`}
                >
                    <TypeRow>
                        <TypeHeader data-at="title-type-cell">{type}</TypeHeader>
                        <Breadcrumb from="titlecell" versionId={versionId} />
                    </TypeRow>
                    <StyledTitle data-at="title-header-cell">{title}</StyledTitle>
                </BreadcrumbLink>
            </td>
        </tbody>
    </table>

);

};

TitleCell.propTypes = { type: PropTypes.string.isRequired, title: PropTypes.string.isRequired, versionId: PropTypes.string.isRequired, };

export default TitleCell;

and it gave me errors on both sides ln browser console or in react test part. i just need to add a tag in top.