ReactJS Creating Components using Properties

Last modified on: September 7, 2025

<h1 data-start="479" data-end="538"><strong data-start="481" data-end="538">ReactJS: Creating Components Using Properties (Props)</strong></h1>
<p data-start="540" data-end="749">Props in ReactJS allow you to <strong data-start="570" data-end="627">pass data from a parent component to child components</strong>, making them dynamic and reusable. Creating components using props is essential for building scalable React applications.</p>
<hr data-start="751" data-end="754" />
<h2 data-start="756" data-end="793"><strong data-start="759" data-end="793">1. Basic Component Using Props</strong></h2>
<p data-start="795" data-end="847"><strong data-start="795" data-end="831">Step 1: Create a child component</strong> (<code data-start="833" data-end="846">Greeting.js</code>)</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>import React from "react";

function Greeting({ name }) {
  return &lt;h2&gt;Hello, {name}!&lt;/h2&gt;;
}

export default Greeting;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="981" data-end="1039"><strong data-start="981" data-end="1028">Step 2: Use the child component in a parent</strong> (<code data-start="1030" data-end="1038">App.js</code>)</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>import React from "react";
import Greeting from "./Greeting";

function App() {
  return (
    &lt;div&gt;
      &lt;Greeting name="Alice" /&gt;
      &lt;Greeting name="Bob" /&gt;
    &lt;/div&gt;
  );
}

export default App;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1255" data-end="1273"><strong data-start="1255" data-end="1271">Explanation:</strong></p>
<ul data-start="1274" data-end="1449">
<li data-start="1274" data-end="1331">
<p data-start="1276" data-end="1331"><code data-start="1276" data-end="1282">name</code> is a <strong data-start="1288" data-end="1296">prop</strong> passed from <code data-start="1309" data-end="1314">App</code> to <code data-start="1318" data-end="1328">Greeting</code>.</p>
</li>
<li data-start="1332" data-end="1388">
<p data-start="1334" data-end="1388"><code data-start="1334" data-end="1344">Greeting</code> uses <code data-start="1350" data-end="1358">{name}</code> to display dynamic content.</p>
</li>
<li data-start="1389" data-end="1449">
<p data-start="1391" data-end="1449">The same component can be <strong data-start="1417" data-end="1427">reused</strong> with different props.</p>
</li>
</ul>
<hr data-start="1451" data-end="1454" />
<h2 data-start="1456" data-end="1495"><strong data-start="1459" data-end="1495">2. Component with Multiple Props</strong></h2>
<p data-start="1497" data-end="1531"><strong data-start="1497" data-end="1531">Child Component (<code data-start="1516" data-end="1528">Profile.js</code>)</strong></p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>function Profile({ username, age, role }) {
  return (
    &lt;div&gt;
      &lt;h3&gt;{username}&lt;/h3&gt;
      &lt;p&gt;Age: {age}&lt;/p&gt;
      &lt;p&gt;Role: {role}&lt;/p&gt;
    &lt;/div&gt;
  );
}

export default Profile;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1728" data-end="1759"><strong data-start="1728" data-end="1759">Parent Component (<code data-start="1748" data-end="1756">App.js</code>)</strong></p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>import Profile from "./Profile";

export default Card;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="2371" data-end="2402"><strong data-start="2371" data-end="2402">Parent Component (<code data-start="2391" data-end="2399">App.js</code>)</strong></p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>import Card from "./Card";

function App() {
  const cardInfo = {
    title: "ReactJS",
    description: "A JavaScript library for building UIs"
  };

return &lt;Card info={cardInfo} /&gt;;
}
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="2603" data-end="2621"><strong data-start="2603" data-end="2619">Explanation:</strong></p>
<ul data-start="2622" data-end="2741">
<li data-start="2622" data-end="2694">
<p data-start="2624" data-end="2694">Props can be <strong data-start="2637" data-end="2648">objects</strong>, making it easier to pass <strong data-start="2675" data-end="2691">grouped data</strong>.</p>
</li>
<li data-start="2695" data-end="2741">
<p data-start="2697" data-end="2741">Helps maintain <strong data-start="2712" data-end="2740">clean and organized code</strong>.</p>
</li>
</ul>
<hr data-start="2743" data-end="2746" />
<h2 data-start="2748" data-end="2784"><strong data-start="2751" data-end="2784">4. Passing Functions as Props</strong></h2>
<ul data-start="2786" data-end="2856">
<li data-start="2786" data-end="2856">
<p data-start="2788" data-end="2856">Components can also receive <strong data-start="2816" data-end="2838">functions as props</strong> to handle events.</p>
</li>
</ul>
<p data-start="2858" data-end="2891"><strong data-start="2858" data-end="2891">Child Component (<code data-start="2877" data-end="2888">Button.js</code>)</strong></p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>function Button({ handleClick, label }) {
  return &lt;button onClick={handleClick}&gt;{label}&lt;/button&gt;;
}

export default Button;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="3029" data-end="3060"><strong data-start="3029" data-end="3060">Parent Component (<code data-start="3049" data-end="3057">App.js</code>)</strong></p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>import Button from "./Button";

function App() {
  const sayHello = () =&gt; alert("Hello from Button!");

return &lt;Button handleClick={sayHello} label="Click Me" /&gt;;
}
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="3240" data-end="3258"><strong data-start="3240" data-end="3256">Explanation:</strong></p>
<ul data-start="3259" data-end="3372">
<li data-start="3259" data-end="3308">
<p data-start="3261" data-end="3308"><code data-start="3261" data-end="3274">handleClick</code> is passed from parent to child.</p>
</li>
<li data-start="3309" data-end="3372">
<p data-start="3311" data-end="3372">Allows child components to <strong data-start="3338" data-end="3371">trigger actions in the parent</strong>.</p>
</li>
</ul>
<hr data-start="3374" data-end="3377" />
<h2 data-start="3379" data-end="3403"><strong data-start="3382" data-end="3403">5. Best Practices</strong></h2>
<ol data-start="3404" data-end="3728">
<li data-start="3404" data-end="3448">
<p data-start="3407" data-end="3448"><strong data-start="3407" data-end="3428">Use destructuring</strong> for cleaner code.</p>
</li>
<li data-start="3449" data-end="3525">
<p data-start="3452" data-end="3525"><strong data-start="3452" data-end="3480">Keep components reusable</strong> by using props instead of hard-coded data.</p>
</li>
<li data-start="3526" data-end="3590">
<p data-start="3529" data-end="3590"><strong data-start="3529" data-end="3546">Use PropTypes</strong> to validate props in larger applications.</p>
</li>
<li data-start="3591" data-end="3664">
<p data-start="3594" data-end="3664">Avoid <strong data-start="3600" data-end="3619">modifying props</strong> inside the child; props are <strong data-start="3648" data-end="3661">read-only</strong>.</p>
</li>
<li data-start="3665" data-end="3728">
<p data-start="3668" data-end="3728">Group related props into <strong data-start="3693" data-end="3704">objects</strong> for better readability.</p>
</li>
</ol>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>import PropTypes from "prop-types";

Profile.propTypes = {
  username: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
  role: PropTypes.string.isRequired
};
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="3917" data-end="3920" />
<h2 data-start="3922" data-end="3939"><strong data-start="3925" data-end="3939">6. Summary</strong></h2>
<ul data-start="3940" data-end="4262">
<li data-start="3940" data-end="3989">
<p data-start="3942" data-end="3989">Props allow <strong data-start="3954" data-end="3986">dynamic, reusable components</strong>.</p>
</li>
<li data-start="3990" data-end="4065">
<p data-start="3992" data-end="4065">Components can receive <strong data-start="4015" data-end="4062">single, multiple, object, or function props</strong>.</p>
</li>
<li data-start="4066" data-end="4157">
<p data-start="4068" data-end="4157">Using props is essential for <strong data-start="4097" data-end="4154">building scalable and maintainable React applications</strong>.</p>
</li>
<li data-start="4158" data-end="4262">
<p data-start="4160" data-end="4262">Combining props with <strong data-start="4181" data-end="4202">nested components</strong> allows developers to <strong data-start="4224" data-end="4247">compose complex UIs</strong> efficiently.</p>
</li>
</ul>

Web Technology View More