COURSES
MBAData Science & AnalyticsDoctorate Software & Tech AI | ML MarketingManagement
Professional Certificate Programme in HR Management and AnalyticsPost Graduate Certificate in Product ManagementExecutive Post Graduate Program in Healthcare ManagementExecutive PG Programme in Human Resource ManagementMBA in International Finance (integrated with ACCA, UK)Global Master Certificate in Integrated Supply Chain ManagementAdvanced General Management ProgramManagement EssentialsLeadership and Management in New Age BusinessProduct Management Online Certificate ProgramStrategic Human Resources Leadership Cornell Certificate ProgramHuman Resources Management Certificate Program for Indian ExecutivesGlobal Professional Certificate in Effective Leadership and ManagementCSM® Certification TrainingCSPO® Certification TrainingLeading SAFe® 5.1 Training (SAFe® Agilist Certification)SAFe® 5.1 POPM CertificationSAFe® 5.1 Scrum Master Certification (SSM)Implementing SAFe® 5.1 with SPC CertificationSAFe® 5 Release Train Engineer (RTE) CertificationPMP® Certification TrainingPRINCE2® Foundation and Practitioner Certification
Law
Job Linked
Bootcamps
Study Abroad
Master of Business Administration (90 ECTS)Master in International Management (120 ECTS)Bachelor of Business Administration (180 ECTS)B.Sc. Computer Science (180 ECTS)MS in Data AnalyticsMS in Project ManagementMS in Information TechnologyMasters Degree in Data Analytics and VisualizationMasters Degree in Artificial IntelligenceMBS in Entrepreneurship and MarketingMSc in Data AnalyticsMS in Data AnalyticsMS in Computer ScienceMaster of Science in Business AnalyticsMaster of Business Administration MS in Data ScienceMS in Information TechnologyMaster of Business AdministrationMS in Applied Data ScienceMaster of Business Administration | STEMMS in Data AnalyticsM.Sc. Data Science (60 ECTS)Master of Business AdministrationMS in Information Technology and Administrative Management MS in Computer Science Master of Business Administration MBA General Management-90 ECTSMSc International Business ManagementMS Data Science Master of Business Administration MSc Business Intelligence and Data ScienceMS Data Analytics MS in Management Information SystemsMSc International Business and ManagementMS Engineering ManagementMS in Machine Learning EngineeringMS in Engineering ManagementMSc Data EngineeringMSc Artificial Intelligence EngineeringMPS in InformaticsMPS in Applied Machine IntelligenceMS in Project ManagementMPS in AnalyticsMS in Project ManagementMS in Organizational LeadershipMPS in Analytics - NEU CanadaMBA with specializationMPS in Informatics - NEU Canada Master in Business AdministrationMS in Digital Marketing and MediaMS in Project ManagementMSc Sustainable Tourism and Event ManagementMSc in Circular Economy and Sustainable InnovationMSc in Impact Finance and Fintech ManagementMS Computer ScienceMS in Applied StatisticsMaster in Computer Information SystemsMBA in Technology, Innovation and EntrepreneurshipMSc Data Science with Work PlacementMSc Global Business Management with Work Placement MBA with Work PlacementMS in Robotics and Autonomous SystemsMS in Civil EngineeringMS in Internet of ThingsMSc International Logistics and Supply Chain ManagementMBA- Business InformaticsMSc International ManagementMBA in Strategic Data Driven ManagementMSc Digital MarketingMBA Business and MarketingMaster of Business AdministrationMSc Digital MarketingMSc in Sustainable Luxury and Creative IndustriesMSc in Sustainable Global Supply Chain ManagementMSc in International Corporate FinanceMSc Digital Business Analytics MSc in International HospitalityMSc Luxury and Innovation ManagementMaster of Business Administration-International Business ManagementMS in Computer EngineeringMS in Industrial and Systems EngineeringMSc International Business ManagementMaster in ManagementMSc MarketingMSc Business ManagementMSc Global Supply Chain ManagementMS in Information Systems and Technology with Business Intelligence and Analytics ConcentrationMSc Corporate FinanceMSc Data Analytics for BusinessMaster of Business AdministrationBachelors in International ManagementMS Computer Science with Artificial Intelligence and Machine Learning ConcentrationMaster of Business AdministrationMaster of Business AdministrationMSc in International FinanceMSc in International Management and Global LeadershipMaster of Business AdministrationBachelor of Business
For College Students

How to Render Content Dynamically in React Websites - User Guide

$$/$$

 

In this segment, you'll learn how you can dynamically render content inside components while using JavaScript's map()  method.
 

The map() in the JavaScript method creates a new array after calling the given function on each array element in order. Note that it does not change the original array.

$$/$$

In the next video, you'll learn how to dynamically show the two subscribers - Shilpa  and Srishti  in the Phone Directory application.

$$/$$

This looks exactly like we had seen in the screenshot. But wait, is this the right way to achieve this? Let’s take a look in the next video.

$$/$$

JavaScript’s map() method can be used to iterate over an array and inject data into the React components or elements dynamically. You don’t need to hard-code the data inside each component. This is one of the major reasons why React refers to its components as ‘reusable’ entities. Also, this is yet another application where curly braces are used in order to write some JavaScript code alongside JSX. You will see how to use this method in the next video.

$$/$$

Notes:

1. The entire map() method is written inside curly braces since it is JavaScript code that needs to be evaluated. map() is a JavaScript function and returns an array after applying the given function to each element of the array.

{
   arrayNameToIterateOver.map(
      //code here
   )
}

2. In React, you need to give a unique key to each element being rendered into the DOM. In case you fail to do this, you will get an warning saying, “Each child in an array or iterator should have unique “key” prop”.

To overcome this, you need to first assign each array element with a unique value for a property. Let’s say the property is id and the unique values are 101 and 102, corresponding to the individual array elements.

let demoArray = [
   {
      id: 101, // unique
      prop1: "SomeValForProp1",
      prop2: "SomeValForProp2"
   },
   {
      id: 102, // unique
      prop1: "SomeOtherValForProp1",
      prop2: "SomeOtherValForProp2"
   }
];

Secondly, you need to assign this property (id here) to the property key of the outermost element inside the map method.

{
   demoArray.map(arrayElement => {
      return <div key={arrayElement.id}>
      	
      </div>
   })
}

The concept of unique keys helps in distinguishing between different elements that are rendered into the DOM in React.

 

In the Phone Directory application, you have used the map method over an array of subscribers to call the function, which renders the subscribers into the DOM after iterating over each subscriber in the array.

 

 

You can commit your code here with “Rendered Subscribers Dynamically” as the commit message and view the diff here.

$$/$$

After adding the ‘Delete’ button alongside each subscriber, the home page should look like this:

 

 

 

That was a cakewalk, wasn’t it? In case you want to match your solution code and see the diff, click on this link.

 

 

You can commit your code with “Added ‘Delete’ button” as the commit message.