Back to Glossary

Props

الخصائص (Props)

GLS-000078

Beginnerweb-basics1 min read
component propsreact propspropertiescomponent properties
Official DocsSign in to save & take notes

Definition

Data passed from a parent component to a child component in React.

البيانات التي تُمرَّر من مكوّن أب إلى مكوّن ابن في React.

Why It Matters

Props is how you make reusable components — the same ProjectCard component can display any project by receiving different props each time.

Props هو الطريقة التي تجعل بها المكونات قابلة لإعادة الاستخدام — نفس مكوّن ProjectCard يمكنه عرض أي مشروع عن طريق تلقي props مختلفة في كل مرة.

Full Definition

Props (short for properties) are how components receive data from their parent. They are read-only — a child component cannot change its own props, only use them. In TypeScript/Next.js, props are typed with an interface to ensure correctness. Props flow one direction: from parent down to children.
Props (اختصار properties) هي الطريقة التي تستقبل بها المكونات البيانات من أبها. إنها للقراءة فقط — لا يستطيع المكوّن الابن تغيير props الخاصة به، فقط استخدامها. في TypeScript/Next.js، يتم تحديد نوع props بواجهة لضمان الصحة. تتدفق Props في اتجاه واحد: من الأب إلى الأبناء.

Example Usage

“<ProjectCard title='Food App' difficulty='beginner' /> passes the title and difficulty as props to the ProjectCard component.”

“<ProjectCard title='تطبيق طعام' difficulty='beginner' /> يمرّر العنوان والصعوبة كـ props إلى مكوّن ProjectCard.”

Knowledge Graph

AI Builder Tips

Sign in for more features

Avoid these mistakes when using Props:

1

Trying to modify props inside a child component

2

Passing too many props (prop drilling) — use Context instead

3

Not defining prop types with TypeScript interfaces

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using Props.

Explain:
1. What is Props and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Trying to modify props inside a child component, Passing too many props (prop drilling) — use Context instead, Not defining prop types with TypeScript interfaces
5. Best practices and production tips

Official Resources

Official Documentation
Browse all AI termsCreate free account