is it possible ? Calling a component inside the custom element in reach

Question

enter image description here enter image description here

i want to change the body dynamcally how can i do this?

import React from 'react'
// import { Link } from 'react-router-dom'
export default function ProjectTemplate(props) {
    const Css= {
        "--background":`${props.isValue ? props.mode : 'red'}`
    }    
    return (
        <>
            <div className="bodyCon projectCon">
                <div className="bodyComponent">
                    <div className="aboutHeading projectHeading" style={Css}>
                        <h1>{props.name}</h1>
                        <div className="container">
                            <div className="projects">
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </>
    )
}

this is a custom component

import React from 'react'
import ProjectTemplate from '../Projects/ProjectTemplate/ProjectTemplate'

export default function Blog(props) {
  return (
    <>
      <ProjectTemplate name='Blog' mode={props.mode} isValue={props.isValue} >
        hhhh
        
      </ProjectTemplate>
    </>
  )
}

this is the another component where i want to add the body of previous component dynamically, then the hhh is not display in browser

output in browser:

<div className="bodyCon projectCon">
                <div className="bodyComponent">
                    <div className="aboutHeading projectHeading" style={Css}>
                        <h1>{props.name}</h1>
                        <div className="container">
                            <div className="projects">
                                hhh
                            </div>
                        </div>
                    </div>
                </div>
            </div>

but hhh is not visible in browser, how can i do for this output

Answer 1

You should read this docs , all you need here is children props

Answer 2

The word hhh will not be displayed because you are calling the custom component in the project template with no props name which you want to display. In your code if you render the component the Blog name will displayed only.

use this in the project template and pass the props to the childrenanme

<div className="projects">
  {props.childrenanme}                       
 </div>

Answer 3

To Answer your Question: Yes we can use component inside nested component in react.

In JSX expressions that contain both an opening tag and a closing tag, the content between those tags is passed as a special prop React Documentation .

And to use these special props you have to use {props.children} .

In your example, you have passed the content b/w opening and closing tag of a custom component but forgot to use it.

In projectTemplate component use the children that you have passed while invoking the component, like this:

<div className="projects">
  {props.childrenanme}                       
 </div>