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:
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.
#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;
}