function won't return files

Question

This is my index.js :

import ReactDOM from 'react-dom';
import Tester from "./Tester.js"

ReactDOM.render(<Tester />, document.getElementById("root"))

This is my Apps.js :

import React from 'react';

function Apps(props) {
console.log(props.name)

    return( 
    <div>
        <h1>Hello, {props.name}</h1>
    </div>
    )
  }

export default Apps

This is my idNum.js :

import React from 'react';

function idNum(props) {
console.log(props.ids)

    return( 
        <h1>Hello, {props.ids}</h1>

    )
  }

export default idNum

This is my Tester.js :

import React from 'react';
import ReactDOM from 'react-dom';
import idNum from './idNum.js';
import Apps from './Apps.js';
import phoneNumber from './phoneNumber.js';

function Tester(props) {
    console.log(props.name)
    return (
        <div>
            <Apps name ="Hailey"/>
            <idNum id = "3" />
            <phoneNumber Integer ="88877738492"/>
      </div>
    )
  }
  
 
ReactDOM.render(
    <Tester
      name ={Apps}
      id ={idNum}
      number ={phoneNumber}
    />,
    document.getElementById('root')
  );

  export default Tester
    

This is my phoneNumber.js :

import React from 'react';

function phoneNumber(props) {
console.log(props.nums)

    return( 
    <div>
        <h1>Hello, {props.nums}</h1>
    </div>
    )
  }

export default phoneNumber

Thank you! I'm not sure why <idNum id = "3" /> <phoneNumber Integer ="88877738492"/> won't run while <Apps/> can

Answer 1

I made a codesandbox with a few fixes:

• Components name and files in PascalCase
• Props name fixed
• A single render function in index.js

https://codesandbox.io/s/charming-wing-ucjsn