Create a component to render user details on a web page using userDetails
To create the application, first create a reactJs project by running the following code
npx create-react-app user
-Create a component User.js inside src folder.
-Then replace <App /> with <User /> inside index.js file as
root.render(<User />) or ReactDOM.render(<User />, document.getElementById("root"))
Now look at the User.js file
const User = () => {
const userDetails=[
{id:1, name:"Joey", dob:"19-01-1886, gender:"Male", designation:"Software Engineer"},
{id:2, name:"Rachel", dob:"27-06-1889, gender:"Female", designation:"UI Designer"},
{id:3, name:"Ross", dob:"24-11-1886, gender:"Male", designation:"Software Engineer"}
];
return(
<div>
{
userDetails.map(user => {
return(
<div key={user.id}>
<p>Name: {user.name}</p>
<p>Gender: {user.gender}</p>
<p>Date of Birth: {user.dob}</p>
<p>Designation: {user.designation}</p><hr />
</div>
);
})
}
</div>
);
}
start the application using npm start and observe the output:
It will show the details of the user on web page as:
Name: Joey
Gender: Male
Date of Birth: 19-01-1886
Designation: Software Engineer
Name: Rachel
Gender: Female
Date of Birth: 27-06-1889
Designation: UI Designer
Name: Ross
Gender: Male
Date of Birth: 24-11-1886
Designation: Software Engineer
Wondering how we are able to use JavaScript and HTML code together. It is because of the JSX elements we have used in our application.
Let's learn about how JSX can be used
Comments
Post a Comment