Skip to content

Courses
Tutorials
Practice
Contests

React Tutorial
React Exercise
React Basic Concepts
React Components
React Props
React Hooks
React Router
React Advanced
React Examples
React Interview Questions
React Projects
Next.js Tutorial
React Bootstrap
React Material UI
React Ant Design
React Desktop
React Rebass
React Blueprint
JavaScript
Web Technology

What is a pure functional component in ReactJS ?

How to use PropTypes in a Functional Component in React?

Last Updated : 24 Apr, 2025

Comments

Improve

Suggest changes

Like Article

Like

Report

PropTypes is a mechanism provided by React for type-checking props passed to components. It allows developers to specify the expected types of props (such as strings, numbers, arrays, objects, etc.) and whether they are required or optional. PropTypes helps catch bugs early by providing warnings in the browser console when incorrect prop types are passed to components, thus improving code reliability and maintainability.

Approach to use PropTypes in Functional Component:

We've added the PropTypes definitions for name, age, and isAdmin.
Component Structure: MyComponent renders a basic structure with a heading and displays props, showcasing PropTypes usage for prop validation.
In App.js, using MyComponent and passed in some sample props: name="Geeks, age={25}, and isAdmin={true}.
PropTypes Validation: PropTypes validate name as a required string, age as a required number, and isAdmin as an optional boolean, enabling type checking for props.

Steps to Create React Application:

Step 1: Create a React application using the following command:

npx create-react-app react-app

Step 2: After creating your project folder i.e. react-app, move to it using the following command:

cd react-app

Example: Below is the code example of PropTypes using a functional component.

JavaScript

// App.js  import React from 'react'; import PropTypes from 'prop-types'; import './App.css'  const MyComponent = ({ name, age, isAdmin }) => {     return (         <div >             <h1 className='heading'>                 GeeksForGeeks             </h1>             <div className='PropsType'>                 <h1 className='main'>                     PropsType Example                 </h1>                 <h2>Hello, {name}!</h2>                 <h4>You are {age} years old.</h4>                 {                     isAdmin && <h4>You are an admin.</h4>                 }             </div>         </div>     ); };  MyComponent.propTypes = {     name: PropTypes.string.isRequired,     age: PropTypes.number.isRequired,     isAdmin: PropTypes.bool };  const App = () => {     return (         <div>             <MyComponent name="Geeks"                 age={25} isAdmin={true} />         </div>     ); };  export default App;

CSS

/* App.css */  body {     margin: 0;     padding: 0;     display: flex;     justify-content: center;     align-items: center;     text-align: center;     height: 100vh; }  .heading {     color: green; }  .main {     color: blue; }  .PropsType {     border: 2px solid blue;     border-radius: 20px;     background-color: rgba(195, 240, 224, 0.904);     padding: auto;     width: 60vh;     height: 30vh;     padding-top: 10%; }

Steps to Run Application:

npm start

Output: Type the following link in your browser http://localhost:3000/

propstype — Output

What is a pure functional component in ReactJS ?

S

strikeackr

Improve

Article Tags :

Web Technologies
ReactJS
React-Questions

Similar Reads

How to use useMemo Hook in a Functional Component in React ?

In React development, optimizing performance is crucial for delivering responsive and fast user experiences. One way to achieve this is by using the `useMemo` hook. In this article, we'll explore what `useMemo` is, why it's beneficial, and how to use it effectively in functional components. Table of

What is a pure functional component in ReactJS ?

What is a JavaScript function? A JavaScript function is a block of code designed to perform a particular task which is executed when it is called. How React functional components are similar to JavaScript functions? Conceptually, components are like JavaScript functions. Â A functional component is a

How to use PropTypes for Type-Checking in React Components ?

React is a JavaScript library for building user interfaces, and one of its key features is component-based architecture. When building React components, it's essential to ensure that the data passed to them is of the correct type. PropTypes is a built-in type-checking library in React that helps dev

How to create a Functional Component in React?

To create a functional component in React, you define a JavaScript function that returns JSX. These components are stateless and rely on props for data input. Functional components are concise, easy to read, and can utilize React Hooks for managing state and side effects, making them a fundamental b

How to access props inside a functional component?

React is an open-source JavaScript library that is mainly used for developing User Interface or UI components. It is a single-page application that is popularly used for developing dynamic web interfaces. While building a React application, the React components serve as basic building blocks. In Rea

How to create Functional Components in React ?

To create a functional component in React, you define a JavaScript function that returns JSX. These components are stateless and rely on props for data input. Functional components are concise, easy to read, and can utilize React Hooks for managing state and side effects, making them a fundamental b

How To Get Previous State In ReactJS Functional Component?

To get the previous state in ReactJS Functional Component we can use the previous value of the state while using the set state method. State can only be directly accessed in the class component so we will be using the react useState hook to accomplish the task. PrerequisitesReact JSReact JS function

How to access props.children in a stateless functional component in ReactJS ?

The {props. children} allows you to create a generic template, which can be modified by a parent when invoked. In this way, a parent component can easily pass whatever is necessary to its child, even generated layout features. Anytime you call a component, it automatically displays whatever it has b

How to use Paper Component in ReactJS ?

In Material Design, the physical properties of paper are translated to the screen. Material UI for React has this component available for us and it is very easy to integrate. We can use the Paper Component in ReactJS using the following approach. Prerequisites:React JSMaterial UIApproachTo use Paper

State in React Functional Component

State in React functional components refers to a way of managing data that influences the rendering and behavior of components. Unlike class components, where state is managed using a this.state object, functional components use the React Hook useState to manage state efficiently. State is Local to

Corporate & Communications Address:

A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)

Registered Address:

K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305

Advertise with us

Company
About Us
Legal
Privacy Policy
In Media
Contact Us
Advertise with us
GFG Corporate Solution
Placement Training Program

Languages
Python
Java
C++
PHP
GoLang
SQL
R Language
Android Tutorial
Tutorials Archive

DSA
Data Structures
Algorithms
DSA for Beginners
Basic DSA Problems
DSA Roadmap
Top 100 DSA Interview Problems
DSA Roadmap by Sandeep Jain
All Cheat Sheets

Data Science & ML
Data Science With Python
Data Science For Beginner
Machine Learning
ML Maths
Data Visualisation
Pandas
NumPy
NLP
Deep Learning

Web Technologies
HTML
CSS
JavaScript
TypeScript
ReactJS
NextJS
Bootstrap
Web Design

Python Tutorial
Python Programming Examples
Python Projects
Python Tkinter
Python Web Scraping
OpenCV Tutorial
Python Interview Question
Django

Computer Science
Operating Systems
Computer Network
Database Management System
Software Engineering
Digital Logic Design
Engineering Maths
Software Development
Software Testing

DevOps
Git
Linux
AWS
Docker
Kubernetes
Azure
GCP
DevOps Roadmap

System Design
High Level Design
Low Level Design
UML Diagrams
Interview Guide
Design Patterns
OOAD
System Design Bootcamp
Interview Questions

Inteview Preparation
Competitive Programming
Top DS or Algo for CP
Company-Wise Recruitment Process
Company-Wise Preparation
Aptitude Preparation
Puzzles

School Subjects
Mathematics
Physics
Chemistry
Biology
Social Science
English Grammar
Commerce
World GK

GeeksforGeeks Videos
DSA
Python
Java
C++
Web Development
Data Science
CS Subjects

@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

Improvement

Suggest Changes

Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.

geeksforgeeks-suggest-icon

Create Improvement

Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.

geeksforgeeks-improvement-icon

Suggest Changes

min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences

Admission Experiences

Career Journeys

Work Experiences

Campus Experiences

Competitive Exam Experiences