score:0

Accepted answer

you are never rendering <hord>, if a component is never rendered, it won't render what's inside it.

in your index.js, you probably have code that looks like this:

import { strictmode } from "react";
import reactdom from "react-dom";

import app from "./app";

const rootelement = document.getelementbyid("root");
reactdom.render(
  <strictmode>
    <app />
  </strictmode>,
  rootelement
);

this code indicates that the <app> component will get rendered in the root element from your index.html.

so starting from the <app> component, you can build your component tree, because you never call <hord>, it will never render, nor will the components rendered inside <hord>.

render <hord> inside your <app> component.

import react from 'react'
import hort from './hort'
import hord from './hord'

function app(props) {
    const text1 = 'check1'
    return (
        <hort test1={text1} />
        <hord />
  );
}

export default app;

as mentioned in the comments, you shouldn't import components that could cause infinite loops.

import react from 'react'
// * removed imports

function hort(props) {
    return (
       <div>
           <h1>just {props.test1}</h1>
           <h2>just {props.test2}</h2>
       </div>
    )
}

export default hort;

Related Query

More Query from same tag