1

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.

2
  • Falta código no teu exemplo... o que é Container? dá uma olhada aqui: jsfiddle.net/Sergio_fiddle/v64t2ezh/3
    – Sergio
    31/07/2020 às 13:20
  • Bom dia Sergio. O Container seria só uma div que contém algo, nesse caso os tickets. A estrutura seria o DropWrapper sendo todo o corpo do app, o Col seria uma coluna. No meu caso, ao tentar fazer dessa maneira a minha tela fica somente com a cor de fundo, sem exibir nada. Caso eu coloque o Col direto na estrutura do App, a coluna é exibida. Mas a solução do amigo Virgilio funcionou. Agradeço seu tempo.
    – Rafael
    31/07/2020 às 13:31

1 Resposta 1

1

Eu puder perceber que você está passando o valor em props no caso deveria ser dentro do componente (children) da seguinte forma:

const DropWrapper = () => {
    return (
        <Div>
        {
            col.map((col, index) => <Container>{col.title}</Container>)            
        }
        </Div>
    );
}

Dá para fazer em props? - dá sim, mas, a estratégia é outra de código que no que você apresentou na sua pergunta não cabe.

1
  • 1
    Era isso mesmo. Obrigado!
    – Rafael
    31/07/2020 às 13:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .