When to use <Box>?

[acomito]

I keep getting this error anytime I use box inside < Email >

<table> cannot appear as a child of <tbody>. See MyReactComponent > Email > Box > tbody > Box > table.

[brandly]

@acomito did you figure anything out here? i just ran into the same situation!

[codeVana]

@acomito I get these but they are warnings. Email is getting delivered fine. Warning: Unknown props bgcolor, border, align, valign on

tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop W20161207-21:56:02.102(-8)? (STDERR) in table (created by Box) W20161207-21:56:02.102(-8)? (STDERR) in Box (created by Email) W20161207-21:56:02.103(-8)? (STDERR) in body (created by Email) W20161207-21:56:02.104(-8)? (STDERR) in html (created by Email)

[poshest]

Don't you have to put the <Box> inside an <Item>? The <Item> is like a <tr><td>, from the docs).

[MartinDawson]

@acomito @brandly

The reason you are getting this is because the <Email /> component renders a <Box /> element. The box renders a table and then a nested tbody as it's children. By putting a <Box /> inside the <Email /> you are trying to put a table inside a tbody which is invalid html probably. The <Box /> doesn't need to be used here, it's only if you want another table somewhere else.

[kopax]

@MartinDawson what do you mean by somewhere else ? Do you mean outside <Email /> ? Would that make sens?

[acomito]

Update:

I've just been using es6 strings. You can use variables in it. You can easily break them out into component-ish string fragments (you could even make them functions that consume variables.

You can use mailchimps free email builder, then export the html and plop that into a string and go from there.

[rohan-deshpande]

I agree this is very confusing, the docs are a bit unclear. Basically Email mounts a table and content goes inside tbody so if you try to put a Box inside it'll generate invalid markup. Basically only use Box inside of Item if you want nested tables, otherwise just use Item