This article demonstrates how to Create a User Card Component in React.

This code consists of two React components: UserCard.js and App.js, showcasing a simple example of a user card rendered in a React application. Let’s break down each part:


import React from 'react';
const UserCard = (props) => {
  return (
      <h2>User Card</h2>
      <p>Name: {}</p>
      <p>Email: {}</p>
      <p>Username: {props.username}</p>
export default UserCard;

In the UserCard component, a functional component is defined. It takes props as a parameter, which are used to pass data from the parent component (App.js). Inside the component, a simple HTML structure is rendered, displaying the user’s name, email, and username.


// App.js

import React, { useState } from 'react';
import UserCard from './UserCard';

function App() {
  return (
    <div className="App">
     <UserCard name="Amit" email="" username="amit0001" />
export default App;


Example to Create a User Card Component in React
Example to Create a User Card Component in React

In the App component, the UserCard component is imported. Within the return statement, a div with the className “App” is rendered, and an instance of the UserCard component is used. The name, email, and username props are passed with specific values (“Amit,” “,” and “amit0001,” respectively) to customize the displayed information in the user card.

This example illustrates the basic structure of a React application with a parent (App.js) rendering a child component (UserCard.js) and passing data between them using props. The UserCard component can be reused with different user data in various parts of the application.

Further Reading

Introduction to React JS

How to Create Class Components in React?

Examples of Array Functions in PHP

Exploring PHP Arrays: Tips and Tricks

Basic Programs in PHP

Registration Form Using PDO in PHP

Inserting Information from Multiple CheckBox Selection in a Database Table in PHP

PHP Projects for Undergraduate Students

Architectural Constraints of REST API

REST API Concepts

Creating a Classified Ads Application in PHP

How to Create a Bar Chart in ReactJS?