reactjs - React Dynamic Text block

Question

I'm new to React, and I've been following Design+Code React to rebuild my portfolio. I'm trying to figure out the best way to build a dynamic text block that I can reuse across multiple pages with different content.

The Text block will always contain an H2 Header tag and a paragraph tag; however, the paragraphs can vary from 1 to 5 depending on the content.

I'm not sure if this is the right way of doing things, but I've created a Paragraph component;

import React from "react"
import styled from "styled-components"

export default function Paragraph(props) {
  return <ParagraphWrapper>{props.text}</ParagraphWrapper>
}

const ParagraphWrapper = styled.p`
  padding: 0 15px 24px 15px;
  line-height: 1.4;
  color: black;
`

I've then added this to a Textblock component ;

import React from "react"
import styled from "styled-components"
import { H2 } from "../styles/TextStyles"
import Paragraph from "./Paragraph"

export default function TextBlock(props) {
  return (
    <Wrapper>
      <Title>{props.title}</Title>
      <Paragraph text={props.text1} />
      <Paragraph text={props.text2} />
      <Paragraph text={props.text3} />
      <Paragraph text={props.text4} />
      <Paragraph text={props.text5} />
    </Wrapper>
  )
}

const Wrapper = styled.div`
  width: 570px;
  margin: 0 auto;
  background: red;
`

const Title = styled(H2)`
  padding: 0 15px 8px 15px;
`

And this is then added to the page, and it works, but if I delete the props from a paragraph, it still renders the paragraph taking up space. Is there a way to remove paragraphs if I don't enter anything in the props?

import React from "react"
import Layout from "../components/layout/layout"
import TextBlock from "../components/layout/TextBlock"
import HeroSection from "../components/sections/HeroSection"

export default function ProjectPage() {
  return (
    <Layout>
      <HeroSection />
      <TextBlock
        title="Overview"
        text1="This is Paragraph 1"
        text2="This is Paragraph 2"
        text3="This is Paragraph 3"
        text4="This is Paragraph 4"
        text5="This is Paragraph 5"
      />
    </Layout>
  )
}

question from:https://stackoverflow.com/questions/65830529/react-dynamic-text-block

Answer 1

Waitting for answers