ReactJS Props (Properties) Sinhala Guide | Data Flow in React Components

ReactJS වල Props (Properties) කියන්නේ මොනවද?
ඉතින් කොහොමද යාලුවනේ! අද අපි කතා කරන්නේ ReactJS වල තියෙන ගොඩක් වැදගත් concept එකක් ගැන – ඒ තමයි Props (Properties). React App එකකදී Components කියන්නේ Building Blocks වගේ. මේ Components අතර Data හුවමාරු කරගන්නේ නැතුව අපිට වැඩක් කරගන්න බැහැ. ඒකට තියෙන ප්රධානම ක්රමය තමයි Props කියන්නේ. සරලවම කිව්වොත්, Props කියන්නේ Parent Component එකකින් Child Component එකකට Data යවන්න භාවිතා කරන Method එකක්.
හිතන්න ඔයා ගාව තියෙනවා පවුලේ බාලයාට දෙන්න ඕන Gifts ගොඩක්. ඔයා තමයි Parent Component එක, පවුලේ බාලයා තමයි Child Component එක. මේ Gifts තමයි Props. ඔයාට පුළුවන් මේ Gifts බාලයාට දෙන්න. හැබැයි, බාලයාට පුළුවන් Gifts භාරගන්න විතරයි, ඒවා වෙනස් කරන්න බැහැ. ඒක තමයි Props වල read-only ස්වභාවය. ඒ කියන්නේ Child Component එකකට ලැබෙන Props වෙනස් කරන්න බැහැ. ඒවා භාවිතා කරන්න විතරයි පුළුවන්.
Functions වලට අපි Arguments/Parameters යවනවා වගේ, Components වලට අපි Data යවන්නේ Props විදියට.
Props හරහා දත්ත යවන හැටි (Passing Data with Props)
React වලදී, Props pass කරන එක හරිම ලේසියි. ඒක HTML Attributes වලට ගොඩක් සමානයි. අපි උදාහරණයක් බලමු.
මුලින්ම අපි Child Component එකක් හදාගමු, ඒකට කියමු Greeting.js
කියලා:
// Greeting.js
import React from 'react';
function Greeting(props) {
return (
<div>
<h2>Hello, {props.name}!</h2>
<p>You are {props.age} years old.</p>
</div>
);
}
export default Greeting;
දැන් මේ Greeting
Component එකට name
සහ age
කියන Props දෙකක් App.js
කියන Parent Component එකෙන් යවමු:
// App.js
import React from 'react';
import Greeting from './Greeting'; // Greeting Component එක import කරගන්නවා
function App() {
return (
<div>
<h1>Welcome to My App</h1>
<Greeting name="Alice" age={30} /> {/* Props යවනවා */}
<Greeting name="Bob" age={25} />
</div>
);
}
export default App;
මේ උදාහරණයේදී <Greeting name="Alice" age={30} />
කියන තැන, අපි name
කියන Prop එකට "Alice" කියන String එකයි, age
කියන Prop එකට 30
කියන Number එකයි යවනවා. Child Component එක ඇතුලේදී මේ Props ටික props
කියන Object එක හරහා අපිට access කරන්න පුළුවන් (උදා: props.name
, props.age
).
Props Destructuring කරමු!
Props Access කරනකොට props.name
, props.age
වගේ ලියන එක සමහර වෙලාවට දිග වැඩි වෙන්න පුළුවන්. ඒක පහසු කරගන්න අපිට Destructuring පාවිච්චි කරන්න පුළුවන්.
අපි Greeting.js
Component එක වෙනස් කරමු:
// Greeting.js (with Destructuring)
import React from 'react';
function Greeting({ name, age }) { // Props Destructure කරනවා
return (
<div>
<h2>Hello, {name}!</h2>
<p>You are {age} years old.</p>
</div>
);
}
export default Greeting;
දැන් අපිට කෙලින්ම name
සහ age
කියන Variables පාවිච්චි කරන්න පුළුවන්. මේකෙන් Code එක තවත් පැහැදිලි වෙනවා නේද?
The children
Prop (`children` Prop එක ගැන)
සමහර වෙලාවට අපිට ඕන වෙනවා Component එකක් ඇතුළේ වෙනත් Elements හෝ Components වගයක් Render කරන්න. ඒ කියන්නේ Child Component එකක් Wrapper එකක් විදියට පාවිච්චි කරන්න. මේකට තමයි children
prop එක භාවිතා කරන්නේ.
උදාහරණයක් විදියට, අපි Box
කියන Component එකක් හදමු, ඒකෙන් Content එකක් Box එකක් ඇතුළේ දාගන්න පුළුවන් වෙන්න.
// Box.js
import React from 'react';
function Box(props) {
return (
<div style={{ border: '1px solid gray', padding: '10px', margin: '10px' }}>
{props.children} {/* මෙතනින් තමයි child content එක render වෙන්නේ */}
</div>
);
}
export default Box;
දැන් App.js
එකෙන් මේ Box
Component එක පාවිච්චි කරමු:
// App.js
import React from 'react';
import Greeting from './Greeting';
import Box from './Box';
function App() {
return (
<div>
<h1>Welcome to My App</h1>
<Greeting name="Alice" age={30} />
<Box>
<h3>This is inside the Box!</h3>
<p>You can put any content here.</p>
<button>Click Me</button>
</Box>
<Box>
<Greeting name="Charlie" age={22} /> {/* Component එකකුත් දාන්න පුළුවන් */}
</Box>
</div>
);
}
export default App;
මෙහිදී, <Box>
Tags අතරට අපි දාන ඕනෑම දෙයක් Box
Component එක ඇතුළේ props.children
විදියට ලැබෙනවා. මේක Layout Components, Modal Dialogs වගේ දේවල් හදන්න ගොඩක් ප්රයෝජනවත්.
Functions Props විදියට යවමු (Passing Functions as Props)
Parent Component එකකින් Child Component එකකට Data යවන එක ගැන අපි දැන් දන්නවා. හැබැයි, සමහර වෙලාවට Child Component එකක සිදුවීමක් (Event) Parent Component එකට දැනුම් දෙන්න ඕන වෙනවා. උදාහරණයක් විදියට, Child Component එකක තියෙන Button එකක් Click කලාම Parent Component එකක State එකක් වෙනස් කරන්න ඕන වෙන්න පුළුවන්.
මේකට අපි Functions Props විදියට Child Component එකට යවනවා. මේවාට Callback Functions කියලා කියනවා.
අපි ClickButton
කියන Component එකක් හදමු.
// ClickButton.js
import React from 'react';
function ClickButton({ handleClick }) { // handleClick කියන function එක prop විදියට ගන්නවා
return (
<button onClick={handleClick}>
Click Me!
</button>
);
}
export default ClickButton;
දැන් App.js
එකෙන් මේ ClickButton
Component එකට Function එකක් යවමු:
// App.js
import React, { useState } from 'react';
import ClickButton from './ClickButton';
function App() {
const [count, setCount] = useState(0);
const handleButtonClick = () => {
setCount(count + 1);
alert('Button was clicked!');
};
return (
<div>
<h1>Counter: {count}</h1>
<ClickButton handleClick={handleButtonClick} /> {/* Function එක Prop විදියට යවනවා */}
<p>Check your browser's alert box!</p>
</div>
);
}
export default App;
මේ උදාහරණයේදී, App
Component එකේ handleButtonClick
කියන Function එක ClickButton
Component එකට handleClick
කියන Prop එක හරහා යවනවා. ClickButton
එකේ Button එක Click කලාම handleClick
Function එක Call වෙනවා, ඒ කියන්නේ Parent Component එකේ handleButtonClick
Function එක Call වෙනවා. මේක React වල Data Flow එක තේරුම් ගන්න ගොඩක් වැදගත්.
ප්රායෝගික උදාහරණය: Card Component එකක් හදමු (Building a Card Component)
දැන් අපි ඉගෙන ගත්ත දේවල් එකතු කරලා පොඩි Project එකක් වගේ දෙයක් කරමු. අපි Simple Card
Component එකක් හදමු, ඒකෙන් title
, description
, imageUrl
, සහ actionButtonText
වගේ Props අරගෙන ඒවා Display කරනවා. ඒ වගේම Button එක Click කලාම Parent එකට දැනුම් දෙන්න Function එකකුත් යවමු.
මුලින්ම Card.js
Component එක හදමු:
// Card.js
import React from 'react';
function Card({ title, description, imageUrl, actionButtonText, onActionClick }) {
return (
<div style={{
border: '1px solid #ddd',
borderRadius: '8px',
padding: '16px',
margin: '16px',
width: '300px',
boxShadow: '0 4px 8px rgba(0,0,0,0.1)'
}}>
{imageUrl && <img src={imageUrl} alt={title} style={{ width: '100%', borderRadius: '4px' }} />}
<h3>{title}</h3>
<p>{description}</p>
{actionButtonText && onActionClick && (
<button
onClick={onActionClick}
style={{
backgroundColor: '#007bff',
color: 'white',
padding: '8px 16px',
border: 'none',
borderRadius: '4px',
cursor: 'pointer'
}}
>
{actionButtonText}
</button>
)}
</div>
);
}
export default Card;
දැන් App.js
එකේදී මේ Card
Component එක භාවිතා කරමු. අපි Cards කිහිපයක් Render කරන්න Object Array එකක් පාවිච්චි කරමු.
// App.js
import React from 'react';
import Card from './Card';
function App() {
const cardData = [
{
id: 1,
title: 'React Basics',
description: 'Learn the fundamental concepts of ReactJS.',
imageUrl: 'https://via.placeholder.com/150/007bff/FFFFFF?text=React',
buttonText: 'Read More'
},
{
id: 2,
title: 'JavaScript ES6',
description: 'Explore modern JavaScript features.',
imageUrl: 'https://via.placeholder.com/150/FFD700/000000?text=JS',
buttonText: 'Explore'
},
{
id: 3,
title: 'CSS Styling',
description: 'Master responsive design and advanced CSS techniques.',
// No image for this card
}
];
const handleCardButtonClick = (cardTitle) => {
alert(`You clicked the button on \"${cardTitle}\" card!`);
};
return (
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center' }}>
<h1 style={{ width: '100%', textAlign: 'center' }}>Our Courses</h1>
{cardData.map((card) => (
<Card
key={card.id} // List items වලට unique key එකක් අනිවාර්යයි
title={card.title}
description={card.description}
imageUrl={card.imageUrl}
actionButtonText={card.buttonText}
onActionClick={() => handleCardButtonClick(card.title)} // Function එක Prop විදියට යවනවා
/>
))}
</div>
);
}
export default App;
ඒක නියමයි නේද? මේකෙන් අපිට පුළුවන් එකම Card Component එක විවිධ Data එක්ක විවිධ විදියට Display කරන්න. මේක තමයි React වල Reusability කියන්නේ.
හොඳම ක්රමවේද සහ පොදු ගැටළු (Best Practices and Common Issues)
Props කියන්නේ Read-Only (Props are Read-Only)
මේක අනිවාර්යයෙන්ම මතක තියාගන්න ඕන දෙයක්: Child Component එකකට ලැබෙන Props කිසිම වෙලාවක ඒ Child Component එක ඇතුළේ වෙනස් කරන්න බැහැ. ඒවා කියවන්න (read) විතරයි පුළුවන්. React වල මේක දැඩි නීතියක්. ඒකෙන් Data Flow එක (දත්ත ගලාගෙන යන ආකාරය) තේරුම් ගන්නත්, Debug කරන්නත් ලේසියි. If you need to change something based on props, use state
within the child component or communicate back to the parent component using functions (callbacks) to update the parent's state, which will then flow down as new props.
PropTypes
භාවිතා කරමු (`PropTypes` for Type Checking)
විශාල Application වලදී, Component එකකට මොන වගේ Props එනවද කියලා දැනගන්න එක ගොඩක් වැදගත්. JavaScript වල Dynamic Typing තියෙන නිසා, වැරදි Data Type එකක් Prop එකක් විදියට ආවොත් Run Time Error එකක් එන්න පුළුවන්. මේක වළක්වගන්න අපිට PropTypes
භාවිතා කරන්න පුළුවන්.
PropTypes
වලින් පුළුවන් Development Mode එකේදී Props වල Data Type එක Validate කරන්න. වැරදි Data Type එකක් ආවොත් Console එකේ Warning එකක් පෙන්නනවා. Production Build එකේදී මේ Code එක Automatically Remove වෙනවා, ඒ නිසා Performance එකට බලපෑමක් නැහැ.
මුලින්ම prop-types
Library එක Install කරගන්න:
npm install prop-types
# or
yarn add prop-types
දැන් Card.js
Component එකට PropTypes
එකතු කරමු:
// Card.js (with PropTypes)
import React from 'react';
import PropTypes from 'prop-types'; // PropTypes import කරගන්නවා
function Card({ title, description, imageUrl, actionButtonText, onActionClick }) {
// ... (rest of the Card component code remains the same)
return (
<div style={{
border: '1px solid #ddd',
borderRadius: '8px',
padding: '16px',
margin: '16px',
width: '300px',
boxShadow: '0 4px 8px rgba(0,0,0,0.1)'
}}>
{imageUrl && <img src={imageUrl} alt={title} style={{ width: '100%', borderRadius: '4px' }} />}
<h3>{title}</h3>
<p>{description}</p>
{actionButtonText && onActionClick && (
<button
onClick={onActionClick}
style={{
backgroundColor: '#007bff',
color: 'white',
padding: '8px 16px',
border: 'none',
borderRadius: '4px',
cursor: 'pointer'
}}
>
{actionButtonText}
</button>
)}
</div>
);
}
// PropTypes define කරනවා
Card.propTypes = {
title: PropTypes.string.isRequired, // title එක String එකක් වෙන්න ඕන, අනිවාර්යයි
description: PropTypes.string.isRequired, // description එක String එකක් වෙන්න ඕන, අනිවාර්යයි
imageUrl: PropTypes.string, // imageUrl එක String එකක් වෙන්න ඕන, අනිවාර්ය නැහැ
actionButtonText: PropTypes.string, // actionButtonText එක String එකක් වෙන්න ඕන, අනිවාර්ය නැහැ
onActionClick: PropTypes.func // onActionClick එක Function එකක් වෙන්න ඕන
};
export default Card;
දැන් අපි App.js
එකේදී Card
Component එකට title
එක නොදී Render කලා නම්, Console එකේ Warning එකක් පෙන්නයි. මේක Debugging වලට ගොඩක් උදව් වෙනවා.
පොදු දෝෂ: Cannot read property '...' of undefined (Common Error: 'Cannot read property '...' of undefined')
React වල වැඩ කරනකොට නිතරම වගේ දකින්න ලැබෙන Error එකක් තමයි Cannot read property 'name' of undefined
වගේ එකක්. මේක ගොඩක් වෙලාවට වෙන්නේ:
- Prop එකක් pass කරලා නැතුව ඇති: Child Component එකක් Expect කරන Prop එකක් Parent Component එකෙන් pass කරලා නැති වෙලාවට.
- Prop නම වැරදි ඇති: Prop එකේ නම Parent එකේදී දීපු නමට වඩා Child එකේදී වෙනස් විදියට ලියලා ඇති (e.g.,
userName
වෙනුවටusername
). - Object එකක් Expected, Variable එකක් දීලා: Destructuring කරනකොට Props Object එකක් විදියට එනවා. සමහරවිට ඔයා Variable එකක් විදියට දාන්න ගිහින් ඇති.
මේ වගේ අවස්ථාවලදී Console Warnings බැලීමෙන් සහ Code එකේ Props pass කරන සහ access කරන තැන් Check කිරීමෙන් ගැටලුව ඉක්මනින් හොයාගන්න පුළුවන්.
නිගමනය (Conclusion)
අද අපි ReactJS වල Props ගැන සවිස්තරාත්මකව කතා කලා. Props කියන්නේ React Component එකක් ඇතුළේ Data Flow එක තේරුම් ගන්න අත්යවශ්යම concept එකක්. Parent Component එකකින් Child Component එකකට Data යවන හැටි, Destructuring වලින් Code එක ලස්සන කරගන්න හැටි, children
prop එකේ ප්රයෝජන, සහ Child Component එකකින් Parent එකට දත්ත යවන්න Functions Props විදියට භාවිතා කරන හැටි අපි ඉගෙන ගත්තා. ඒ වගේම PropTypes
වලින් Type Checking කරන එක වගේ Best Practices ගැනත්, පොදු Error ගැනත් දැනුවත් වුනා.
ඔයාගේ React Journey එකේදී Props කියන්නේ ගොඩක් වෙලාවට පාවිච්චි වෙන දෙයක්. ඒ නිසා මේ concept එක හොඳින් අවබෝධ කරගන්න එක ගොඩක් වැදගත්. මම දීපු Code Examples ඔයාගේ Local Environment එකේ Run කරලා බලන්න. ඒවා වෙනස් කරලා අලුත් දේවල් Try කරන්න. එතකොට තව දුරටත් මේ ගැන අවබෝධයක් ලැබෙයි.
ඔයාගේ අත්දැකීම් කොහොමද? ඔයාට මේ Article එකෙන් අලුත් දෙයක් ඉගෙන ගන්න ලැබුණද? පහලින් Comment එකක් දාලා යන්න අමතක කරන්න එපා. අලුත් Article එකකින් හමුවෙමු!