Return multiple components on the same level #1213

NewBobCon · 2024-03-11T00:45:39Z

NewBobCon
Mar 11, 2024

I've just started working on making a simple prototype site. Is there any capability to return multiple components on the same level? The reason for doing so is to try and follow semantic html guidelines where the body tag might have a header, main, and footer tag without having to first place it into a div.

<body>
    <header>MyHeader</header>
    <main>The main content</main>
    <footer>MyFooter</footer>
</body>

This is how I would think to do it, but the output is not as expected:

from reactpy import component, html, run
from reactpy.backend.flask import configure

@component
def App():
    return (header(), main(), footer())

@component
def header():
    return html.header("Home", navigation())

@component
def main():
    return html.main("Welcome to my site!")

@component
def navigation():
    return html.nav("Item1", "Item2", "Item3", "Item4", "Item5")

@component
def footer():
    return html.footer("This site was made with ReactPy")


run(App, "127.0.0.1", 8080)

There is a way to get this to render, but it requires placing everything in a div:

from reactpy import component, html, run
from reactpy.backend.flask import configure

@component
def App():
    return html._(header(), main(), footer())

@component
def header():
    return html.header("Home", navigation())

@component
def main():
    return html.main("Welcome to my site!")

@component
def navigation():
    return html.nav("Item1", "Item2", "Item3", "Item4", "Item5")

@component
def footer():
    return html.footer("This site was made with ReactPy")


run(App, "127.0.0.1", 8080)

Any help or guidance would be great. Thank you in advance!

Archmonger · 2024-03-11T08:32:12Z

Archmonger
Mar 11, 2024
Maintainer

~~Multiple root-level components is currently only possible within ReactPy-Django.~~

~~This ticket will need to be developed in order to support it within ReactPy core.~~

~~EDIT: I'm realizing you're more accurately asking about whether you can template html, body, and head within ReactPy core.~~

~~The answer is also not yet, but it's in development.~~

1 reply

NewBobCon Mar 17, 2024
Author

Not sure what is meant by template, but if it makes sense to you, then great! As you stated, it's currently in development so I look forward to seeing the implementation in a newer release :)

Archmonger · 2024-03-17T06:03:32Z

Archmonger
Mar 17, 2024
Maintainer

Okay I think I might be going blind. I apologies for the previous rushed responses. I had thought you were trying to modify elements such as html.head.

For your scenario of

<body>
    <header>MyHeader</header>
    <main>The main content</main>
    <footer>MyFooter</footer>
</body>

If you want to structure it as "multiple components on the same level", your second example is correct.
You need to use a parent HTML element, in this case html._ (a HTML fragment), to "encapsulate" things that are within the same level.

@component
def App():
    return html._(header(), main(), footer())

You can not directly return an iterable as a top-level root node within your component (such as your return (header(), main(), footer()) example.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Return multiple components on the same level #1213

{{title}}

Replies: 2 comments 1 reply

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Return multiple components on the same level #1213

NewBobCon Mar 11, 2024

Replies: 2 comments · 1 reply

Archmonger Mar 11, 2024 Maintainer

NewBobCon Mar 17, 2024 Author

Archmonger Mar 17, 2024 Maintainer

NewBobCon
Mar 11, 2024

Replies: 2 comments 1 reply

Archmonger
Mar 11, 2024
Maintainer

NewBobCon Mar 17, 2024
Author

Archmonger
Mar 17, 2024
Maintainer