Estou tendo um problema na tentativa de clonar o front do trello e o problema começa a ocorrer quando tento inserir as colunas. Eu possuo um data que armazena os dados da coluna e dos tickets. Com os tickets tudo funciona direitinho (pois eu fiz primeiro), mas na hora da coluna as coisas complicam. Segue o código da data:
export const data = [
{
"title": "Titulo 1",
"description": "Descrição 1",
"col": "0"
},
{
"title": "Titulo 2",
"description": "Descrição 2",
"col": "1"
}
];
export const col = [
{
"title": "Coluna 1"
},
{
"title": "Coluna 2"
},
{
"title": "Coluna 3"
}
];
No meu componente DropWrapper
estou tentando imprimir uma coluna pra cada registro desse data:
const DropWrapper = () => {
return (
<Div>
{
col.map((col, index) => <Container title={col.title}/>
)
}
</Div>
);
}
E a estilização desse Div é:
export const Div = styled.div`
height: 90%;
width: 100%;
display: flex;
flex-direction: row;
`;
e do Container:
export const Container = styled.div`
width: 400px;
height: 500px;
display: flex;
justify-content: space-between;
flex-direction: row;
`;
Ao fazer isso, nada aparece na tela, por mais que esteja lá, já que eu consigo passar o mouse em cima dos pontos onde estariam as colunas e aquela caixa com o título do componente aparece. Sou iniciante em react, então peço desculpas se for algo muito óbvio ou se faltou algum código. Agradeço à todos.
Container
? dá uma olhada aqui: jsfiddle.net/Sergio_fiddle/v64t2ezh/3