Rendering multiple divs in react

JavaScript
1

So I am going to try and remake the planet site using react. I think I have got the basics of props and down. Since, this is going to be a multiple page project it gives me a good reason to check out the router. However, up until now all the react components I have worked in only rendered one div. For styling purposes, and separating content is it ok to render multiple divs? For example

import React, {Component} from "react";
import './index.css';

class Planets extends Component{
    constructor(props){
        super(props);
        this.state = {
            content: "Mercury is the smallest planet in the Solar System and the closest to the Sun. Its orbit around the Sun takes 87.97 Earth days, the shortest of all the Sun's planets. Mercury is one of four terrestrial planets in the Solar System, and is a rocky body like Earth.",
            source: "https://i.ibb.co/WgBTH70/planet-mercury-1.png"
        }
    }
    render(){
        return(
    <div>
        <div className="img-text-container">
            <div>
                <img src={this.state.source} className="planetImg"/>
            </div>
            <div className="planetInfo">
               <h1>{this.props.planetName}</h1>
               <p>{this.state.content}</p>
            </div>
        </div>
    </div>
        )
    }
}
export default Planets;

The img-text-container I am going to be using flexbox on, and there will be othere content that I dont want to have the flex direction. Is setting it up this way ok? I didnt see a point of making a new component for a sentence or two of text

2

As long as all the elements are inside a single parent element (or a fragment) I don’t see an issue.

Why do you ask, what would be the issue?

1 Like
3

I was just wondering. All the tutorials, and the practice projects like the todo list all only rendered one div per component. Nothing was ever mentioned if more than one div render was possible or if multiple divs are used like the example above.

4

Well, JSX and in extension React wouldn’t be very useful if you were only able to have one element. But as I said, the return does have to be one top-level element (or an array of elements).

You can read more about JSX in the docs to better understand what is going on behind the JSX syntax,

5

you must be confused(unless we talk for different tutorials), as all the courses i recall describe components which return multiple elements(altho always wrapped inside one parent container, as is the default requirement for react components). Its perfectly fine to nest many elements in a single component, or even nest many components in one parent component, but make sure you wrap any repetitive pattern, in its own component, to reduce your code, which is the general aim of React. You have a list with several links, each link represented as <li> item and then a nested anchor inside, all having attributes, classes, text content and whatnot- its good idea to make a “link” component. You have some profile cards, which all include a photo, caption and some details- make a profile component, to describe the structure of all those elements in one go.

1 Like
6

You are right. I am not sure why it confused me. The list itself had several elements rendered for all components. Not sure why, but I was thinking only one div was allowed since all the tutorials only used one div. When you think about it, it does seem kind of weird if they allow only one div

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.