Props

1 2
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Test from './Test';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Test test="1" test2="2"/>
);


reportWebVitals();
export default function Test({test, test2){
    return (
        <div>
            <div>{ test }</div>
            <div>{ test2 }</div>
        </div>
    )
}
Reactでは、root.renderでの関数読み込み時に、属性を付けることでそれを関数側に引数として渡すことができます。

src/Test.jsではTestの引数として、src/index.jsの属性を引数として受け取っています。
root.render(
<Test test="1" test2="2"/>
);

としているため、Test関数の引数はtest="1", test2="2"となります。

また、数値として渡したい場合は、値を{}でくくるようにしてください。
{}でくくることで配列、オブジェクトも引数として渡すことができるようになります。