[FIXED] How to fix problem with <div> cannot appear as a child of <table>

Issue

I have problem with nesting, how can I fix this?

I tried to change divs to tbody, td, th, tr but cant understand how to unite them

React:

return (
<div key={data.name}>
  {tournaments.map((data, i) => (
    <div className="table-card" key={i}>
      <div className="accordion" onClick={() => toggle(i)}>
        <div className="wrapper">
          <div className="title-wrapper">
            <div className="name">{data.name}</div>
            <div className="type">{data.type}</div>
          </div>
          <div className="time-wrapper">
            <div className="time">{data.time}</div>
            <div className="date">{data.data}</div>
          </div>
        </div>

        <div className={selected === i ? 'content show' : 'content'}>
          <tr className="buy-in-usd">
            BUY-IN USD: <span>{data.buyUSD}</span>
          </tr>
          <tr className="gtd">
            GTD: <span>{data.gtd}</span>
          </tr>
          <tr className="clubId">
            CLUB ID: <span>{data.clubId}</span>
          </tr>
          <tr className="application">
            APPLICATION: <span>{data.application}</span>
          </tr>
          <tr className="lateRegistration">
            LATE REGISTRATION: <span>{data.lateRegistration}</span>
          </tr>
        </div>
      </div>
    </div>
  ))}
</div>
)

CSS:

table {
    margin-right: auto;

    ul {
      padding: 0;
    }

    .table-card {
      display: block;
      position: relative;
      justify-content: flex-start;
      width: 440px;
      flex-direction: row;
      border-top: 2px solid #979797;
      margin-top: 20px;
      cursor: pointer;

      .heart {
        position: absolute;
        z-index: 20;
        margin-left: 400px;
        margin-top: 44px;
      }

      .wrapper {
        display: flex;
        position: relative;
      }

      .accordion {
        width: 440px;
      }

      .overlay {
        width: 40px;
        height: 40px;
      }

      .content {
        font-size: 18px;
        text-transform: uppercase;
        color: #EBB543;
        overflow: hidden;
        max-height: 0;
        transition: all 0.3s;

        .buy-in-usd {
          padding-left: 6px;
          margin-top: 20px;
        }

        .gtd, .clubId, .application, .lateRegistration {
          padding-top: 6px;
          padding-left: 6px;
        } :last-child {
          padding-bottom: 6px;
        }

        span {
          color: #FFFFFF;
        }
      }

      .content.show {
        height: auto;
        max-height: 9999px;
        transition: all 0.5s cubic-bezier(1, 0, 1, 0);
      }

      .name {
        padding-top: 6px;
        padding-left: 6px;
        font-size: 16px;
        border: 0;
      }

      .type {
        padding-top: 14px;
        padding-left: 6px;
        padding-bottom: 6px;
        font-size: 16px;
        border: 0;
      }

      .date {
        padding-top: 6px;
        padding-right: 6px;
        font-size: 16px;
        border: 0;
      }

      .time {
        padding-top: 6px;
        padding-right: 16px;
        font-size: 16px;
        border: 0;
      }

      .buy-in-usd, .gtd, .clubId, .application, .lateRegistration {
        border: 0;
      }
    }

    td {
      padding: 0 4px 0 4px;
    }
  }

<--- Main problem

Need to be like this:

On click it's opening:

Solution

I assume you are new to react. But to jump into the react world we have to know at least the basics of HTML and even more. To answer your question: tr tag can not be used outside table tag. So, you have to wrap the tr tag inside a table tag.

 <div>
   <tr> ... </tr>
 </div>

it should be like this

  <table>
    ...
    <tr> ... </tr>
    ...
  </table>

It is better to use an unordered HTML list to get what you are trying to achieve.

Codesandbox

#App.js

import { useState } from "react";
import "./styles.css";

const tournaments = [
  {
    name: "300 Daily",
    type: "PKO",
    time: "13:30",
    details: {
      buyInUsd: "$10,00",
      gtd: "$300,00",
      clubId: "2569999",
      application: "PPPOKER",
      lateRegistration: 2
    }
  },
  {
    name: "1K Deep Stack",
    type: "KO",
    time: "14:30",
    details: {
      buyInUsd: "$30,00",
      gtd: "$200,00",
      clubId: "4569569",
      application: "PPPOKER",
      lateRegistration: 1
    }
  }
];

const Tournament = ({ tournament }) => {
  const [show, setShow] = useState(false);
  const { details } = tournament;

  return (
    <li
      className="tournament"
      onClick={() => setShow((prevState) => !prevState)}
    >
      <div className="tournament-title">
        <span className="tournament-name">{tournament.name}</span>
        <span className="tournament-time">{tournament.time}</span>
      </div>
      <div className="tournament-type">{tournament.type}</div>
      <div className={`tournament-details ${show ? "show" : "hide"}`}>
        <div className="tournament-detail">
          BUY-IN USD: <span>{details.buyInUsd}</span>
        </div>
        <div className="tournament-detail">
          GTD: <span>{details.gtd}</span>
        </div>
        <div className="tournament-detail">
          CLUB ID: <span>{details.clubId}</span>
        </div>
        <div className="tournament-detail">
          APPLICATION: <span>{details.application}</span>
        </div>
        <div className="tournament-detail">
          LATE REGISTRATION:
          <span> {details.lateRegistration}</span>
        </div>
      </div>
    </li>
  );
};

export default function App() {
  return (
    <div className="App">
      <ul className="tournaments">
        {tournaments.map((tournament, i) => (
          <Tournament tournament={tournament} key={i} />
        ))}
      </ul>
    </div>
  );
}

#styles.css

html,
.body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: black;
}

.tournaments {
  color: white;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.tournament {
  min-height: 60px;
  border-top: 2px solid gray;
  padding: 12px 8px 0;
  cursor: pointer;
}

.tournament-details {
  height: 150px;
}

.tournament-detail {
  color: gold;
}

.tournament-detail > span {
  color: white;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.tournament-title {
  height: 30px;
  width: 100%;
}

.tournament-name {
  float: left;
}

.tournament-time {
  float: right;
}

.tournament-type {
  height: 30px;
  width: 100%;
  float: left;
}

Answered By - yohanes

Answer Checked By - Timothy Miller (PHPFixing Admin)