{"id":136391,"date":"2024-07-12T07:24:17","date_gmt":"2024-07-12T07:24:17","guid":{"rendered":"https:\/\/www.sushilkumar.ind.in\/blog\/?p=136391"},"modified":"2024-07-12T07:26:14","modified_gmt":"2024-07-12T07:26:14","slug":"create-a-functional-component-display-the-list-they-provided-the-array-like-ava-anthony-baddon-baen-caley-caellum-i-had-to-display-those-data-as-per-image-attach","status":"publish","type":"post","link":"https:\/\/www.sushilkumar.ind.in\/blog\/uncategorized\/create-a-functional-component-display-the-list-they-provided-the-array-like-ava-anthony-baddon-baen-caley-caellum-i-had-to-display-those-data-as-per-image-attach\/","title":{"rendered":"Create a functional component & display the list. They provided the array like [“Ava”, “Anthony”, “Baddon”, “Baen”, “Caley”, “Caellum”]. I had to display those data as per image attached reactjs"},"content":{"rendered":"\n

<\/p>\n\n\n\n

To display a list of names in a React functional component based on a provided array, you can follow a structured approach to render the data dynamically. I’ll walk you through the entire process of creating a functional component that will display the names as per the design specification.<\/p>\n\n\n\n

Let’s assume that the design you are referring to is a simple list where each name is displayed in a styled card-like format. I will also include how you might set up some basic styles to achieve a clean and visually appealing presentation.<\/p>\n\n\n\n

Step-by-Step Guide<\/h3>\n\n\n\n

1. Setup Your React Environment<\/h4>\n\n\n\n

If you haven’t already set up your React environment, you can start a new project using Create React App:<\/p>\n\n\n\n

npx create-react-app name-list-app\ncd name-list-app\nnpm start<\/code><\/pre>\n\n\n\n
2. Create the Functional Component<\/h4>\n\n\n\n
In the src<\/code> folder, create a new file named NameList.js<\/code>. This file will contain our functional component.<\/p>\n\n\n\n
\/\/ src\/NameList.js\nimport React from 'react';\nimport '.\/NameList.css'; \/\/ Import the CSS file for styling\n\nconst NameList = () => {\n  \/\/ Define the array of names\n  const names = [\"Ava\", \"Anthony\", \"Baddon\", \"Baen\", \"Caley\", \"Caellum\"];\n\n  return (\n    <div className=\"name-list\">\n      {names.map((name, index) => (\n        <div key={index} className=\"name-card\">\n          <span className=\"name-text\">{name}<\/span>\n        <\/div>\n      ))}\n    <\/div>\n  );\n};\n\nexport default NameList;<\/code><\/pre>\n\n\n\n
3. Add Styling to the Component<\/h4>\n\n\n\n
Create a CSS file named NameList.css<\/code> in the same folder as NameList.js<\/code> to style the list.<\/p>\n\n\n\n
\/* src\/NameList.css *\/\n.name-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 16px; \/* Space between cards *\/\n  padding: 16px; \/* Padding around the list *\/\n  justify-content: center; \/* Center the items *\/\n}\n\n.name-card {\n  background-color: #f0f0f0; \/* Light gray background *\/\n  border-radius: 8px; \/* Rounded corners *\/\n  padding: 12px 24px; \/* Padding inside the card *\/\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); \/* Shadow for depth *\/\n  text-align: center; \/* Center text *\/\n  min-width: 100px; \/* Minimum width of the card *\/\n  max-width: 150px; \/* Maximum width of the card *\/\n}\n\n.name-text {\n  font-size: 16px; \/* Font size for the text *\/\n  color: #333; \/* Dark gray text color *\/\n  font-weight: 600; \/* Bold text *\/\n}<\/code><\/pre>\n\n\n\n
4. Update App.js<\/code> to Include NameList<\/code><\/h4>\n\n\n\n
Replace the content of App.js<\/code> to render the NameList<\/code> component:<\/p>\n\n\n\n
\/\/ src\/App.js\nimport React from 'react';\nimport '.\/App.css';\nimport NameList from '.\/NameList'; \/\/ Import the NameList component\n\nfunction App() {\n  return (\n    <div className=\"App\">\n      <header className=\"App-header\">\n        <h1>List of Names<\/h1>\n        <NameList \/> {\/* Render the NameList component *\/}\n      <\/header>\n    <\/div>\n  );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n
5. Add Global Styles (Optional)<\/h4>\n\n\n\n
You might want to add some global styles to App.css<\/code> for consistency.<\/p>\n\n\n\n
\/* src\/App.css *\/\n.App {\n  text-align: center;\n}\n\n.App-logo {\n  height: 40vmin;\n  pointer-events: none;\n}\n\n.App-header {\n  background-color: #282c34;\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  color: white;\n}\n\nh1 {\n  font-size: 2.5rem;\n  margin-bottom: 16px;\n}<\/code><\/pre>\n\n\n\n
6. Testing the Component<\/h4>\n\n\n\n
Run the development server with npm start<\/code> to see your component in action.<\/p>\n\n\n\n
Full File Structure<\/h3>\n\n\n\n
Here\u2019s what your src<\/code> folder might look like:<\/p>\n\n\n\n
src\/\n  NameList.js\n  NameList.css\n  App.js\n  App.css\n  index.js<\/code><\/pre>\n\n\n\n
Explanation of Code<\/h3>\n\n\n\n
    \n
  • NameList.js<\/code><\/strong>:<\/li>\n\n\n\n
  • names<\/code> Array<\/strong>: Contains the list of names to display.<\/li>\n\n\n\n
  • map<\/code> Method<\/strong>: Iterates over the names<\/code> array to create a name-card<\/code> for each name.<\/li>\n\n\n\n
  • key<\/code> Prop<\/strong>: Added to the div<\/code> to help React identify which items have changed, are added, or are removed.<\/li>\n\n\n\n
  • NameList.css<\/code><\/strong>:<\/li>\n\n\n\n
  • name-list<\/code> Class<\/strong>: Styles the container of the name cards.<\/li>\n\n\n\n
  • name-card<\/code> Class<\/strong>: Styles each individual card.<\/li>\n\n\n\n
  • name-text<\/code> Class<\/strong>: Styles the text inside the card.<\/li>\n<\/ul>\n\n\n\n
    Advanced Features<\/h3>\n\n\n\n
    If you want to enhance the functionality or appearance, consider the following additions:<\/p>\n\n\n\n
      \n
    • Animations<\/strong>: Add CSS animations for hover effects or transitions.<\/li>\n\n\n\n
    • Prop Types<\/strong>: Use PropTypes to validate props<\/code> if you extend the component.<\/li>\n\n\n\n
    • Dynamic Content<\/strong>: Fetch names from an API instead of hardcoding them.<\/li>\n<\/ul>\n\n\n\n
      Here\u2019s a brief example of how you might extend the component to accept names as props:<\/p>\n\n\n\n
      \/\/ src\/NameList.js\nimport React from 'react';\nimport PropTypes from 'prop-types'; \/\/ Import PropTypes for type checking\nimport '.\/NameList.css';\n\nconst NameList = ({ names }) => {\n  return (\n    <div className=\"name-list\">\n      {names.map((name, index) => (\n        <div key={index} className=\"name-card\">\n          <span className=\"name-text\">{name}<\/span>\n        <\/div>\n      ))}\n    <\/div>\n  );\n};\n\n\/\/ Define prop types for the component\nNameList.propTypes = {\n  names: PropTypes.arrayOf(PropTypes.string).isRequired,\n};\n\nexport default NameList;<\/code><\/pre>\n\n\n\n
      Then you can use it like this in App.js<\/code>:<\/p>\n\n\n\n
      \/\/ src\/App.js\nimport React from 'react';\nimport '.\/App.css';\nimport NameList from '.\/NameList';\n\nfunction App() {\n  const names = [\"Ava\", \"Anthony\", \"Baddon\", \"Baen\", \"Caley\", \"Caellum\"];\n\n  return (\n    <div className=\"App\">\n      <header className=\"App-header\">\n        <h1>List of Names<\/h1>\n        <NameList names={names} \/>\n      <\/header>\n    <\/div>\n  );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n
      This approach keeps the NameList<\/code> component flexible and reusable.<\/p>\n\n\n\n
      Example Visuals<\/h3>\n\n\n\n
      Here are a few screenshots to help visualize how the component looks:<\/p>\n\n\n\n
      Default View<\/h4>\n\n\n\n
      \"NameList<\/figure>\n\n\n\n
      Hover Effect (if added)<\/h4>\n\n\n\n
      \"NameList<\/figure>\n\n\n\n
      Feel free to adjust the styles and functionality to better meet your design requirements.<\/p>\n\n\n\n
      <\/p>\n","protected":false},"excerpt":{"rendered":"
      To display a list of names in a React functional component based on a provided array, you can follow a structured approach to render the data dynamically. I’ll walk you through the entire process of creating a functional component that will display the names as per the design specification. Let’s assume that the design you …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[1],"tags":[],"class_list":["post-136391","post","type-post","status-publish","format-standard","","category-uncategorized"],"jetpack_publicize_connections":[],"acf":[],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p99pkJ-ztR","_links":{"self":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts\/136391"}],"collection":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/comments?post=136391"}],"version-history":[{"count":2,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts\/136391\/revisions"}],"predecessor-version":[{"id":136394,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts\/136391\/revisions\/136394"}],"wp:attachment":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/media?parent=136391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/categories?post=136391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/tags?post=136391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}