Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tbody in Column component

See original GitHub issue

Hi Guys!

I just want to ask about Column component. It has a tag. Because of that, when I put Column in Section component error validateDOMNesting(...): <p> cannot appear as a child of <tbody>. appears. Components structure look like this:

<Html>
      <Head />
      <Section>
          <Column style={{ width: '30%' }}>
              <Text>Column 1</Text>
            </Column>
            <Column style={{ width: '70%' }}>
              <Text>Column 2</Text>
            </Column>
      </Section>
    </Html>

And after render to string, html is invalid because all columns move to of <Html>.

What is structure should be? What did I do wrong with these components?

Issue Analytics

State:
Created 9 months ago
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

cassiorsfreitascommented, Dec 8, 2022

Guys, i’ve been doing some changes regarding these two components (Column and Section). These components are pretty much linked, right? I mean, there’s no way to think in rows (vertical divisions) without thinking in columns (horizontal divisions) when we’re talking about tables. So, fully independently implementing these components doesn’t sound good to me. The Column component is responsible for creating td columns inside the Section component that creates tr rows.

<Section>
    <Column></Column>
    <Column></Column>
    <Column></Column>
</Section>

I’ve also added a style that organizes, centers and assigns the same width to all columns inserted in the section. In other words, users don’t need to worry about it, but can change it if they want.

HTML static example: https://codesandbox.io/s/section-and-column-example-lic7bh?file=/index.html

1reaction

bukinoshitacommented, Dec 8, 2022