Div in React is not appearing

Asked

Viewed 43 times

1

I am having a problem in trying to clone the front of the trello and the problem begins to occur when I try to insert the columns. I have a date that stores the column and ticket data. With tickets everything works fine (because I did it first), but at column time things get complicated. Follow the date code:

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"
    }
];

In my component DropWrapper I’m trying to print a column for every record of that date:

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

And the stylization of this Div is:

export const Div = styled.div`    
    height: 90%;
    width: 100%;    
    display: flex;    
    flex-direction: row;      
`;

and the Container:

export const Container = styled.div`
    width: 400px;
    height: 500px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
`;

When doing this, nothing appears on the screen, no matter how much it is there, since I can move the mouse over the points where the columns would be and that box with the component title appears. I’m a beginner in React, so I apologize if it’s something too obvious or if there’s a code missing. I thank you all.

javascript css react

  • Your example lacks code... what it is Container? take a look here: https://jsfiddle.net/Sergio_fiddle/v64t2ezh/3/

  • Good morning Sergio. Container would just be a div that contains something, in this case the tickets. The structure would be the Dropwrapper being the whole body of the app, the Col would be a column. In my case, when trying to do this way my screen is only with the background color, without displaying anything. If I put the Col directly in the structure of the App, the column is displayed. But the solution of friend Virgilio worked. I appreciate your time.

1 answer

1


I can see that you are passing the value on props in case it should be within the component (children) as follows:

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

You can do in props? - gives yes, but, the strategy is another code that in what you presented in your question does not fit.

  • 1

    That’s right. Thank you!

Browser other questions tagged javascript css react

You are not signed in. Login or sign up in order to post.