React Bootstrap #9 - Use carousel and map function to work on testimonials

so today   we'll use Carousel and map function to work on  testimonials first let's create a new component   so open your code editor open components  and here create a new file testimonials.js we'll create a functional component so add  export default function and a component name   app testimonials in return let's just add the div  tag with the text testimonials now let's import this component under  app.js so on top import app testimonials then at the bottom use app testimonial element   check the preview   and we can see testimonials it means our component  is working now let's add this title and a subtitle   Also let's add the grid layout so open react  bootstrap click components layout and grid   we will use fluid container and we will only  use container so copy the import of container and add them under testimonials.js copy the container element you can remove this div tag  and instead add a section add the ID testimonials and a class   testimonials block then inside this  section you can paste the container element   for the title let's use a div tag with a class  title holder for the title I will use the <h2> tag client testimonials then for the subtitle  let's add another div tag with a class subtitle   you can copy the subtitle from the actual website and you can just paste it over here check the preview you can see title and a subtitle now let's add all of this  content in Carousel component   so go back to react bootstrap  click components carousel copy the import of carousel  and add them on the very top then copy this Carousel element and you  can add them after the title holder div check   the preview and we can see the  carousel is working which is good now instead of this three Carousel  item let's remove two of them also remove this default content  inside this carousel item first we want to show this description  so inside this carousel item let's use a <blockquote> tag inside that  tag let's use <p> tag for the description then we need to add the name and the designation so add a cite tag for the name I will use span tag with the  class name so here I will show the name then I will use another span tag with a class  designation and here I will show the designation this is the static content but I want to show  the dynamic one so on top I will paste the data   testimonials data here we got properties like  ID name description and designation to use this   data we can use a map function so just after this  carousel element you can use testimonialsdata.map we can then access testimonials inside return let's add this Carousel item now let's use the key attribute  and add testimonials.id   to access the description we  can use testimonials.description for the name we can use testimonials.name and finally for the designation we  can use testimonials.designation check the preview and we can see the testimonial is working fine   but if you look at the design we  don't have left and right arrow to remove them you can click on the API carousel we can simply add controls and set them to false   so in the carousel element add  controls and set them to false check the preview again and this time it is  looking exactly the same as in design great this is the end of this session   feel free to comment below if you have  any questions also please don't forget   to like share and subscribe to my channel  to get more videos in the future thank you

Channel: Code with Bibek

Views: 3,332

Keywords: react bootstrap, react js, react tutorial, react js for beginners, react tutorial for beginners, react bootstrap tutorial, react bootstrap for beginners, react bootstrap project, react bootstrap website, react bootstrap carousel component, add carousel in react js, add carousel using react bootstrap, use map function in react, react js map function, add testimonials in react js, add testimonials in react bootstrap, react js project, react js example, react bootstrap example

Id: olTo0w_0NP4

Length: 8min 17sec (497 seconds)

Published: Fri Jan 06 2023