Introduction

Welcome to the #77 Day of React challenge where we will be enhancing the Tiru Restaurant website by adding a testimonial section using React. Testimonials are a great way for customers to share their positive experiences with others and can help build credibility for the restaurant.

Setting Up the Project

Before we start coding, make sure you have Node.js and npm installed on your system. You can create a new React project using create-react-app by running the following command in the terminal:

npx create-react-app tiru-restaurant-testimonials

Creating the Testimonial Component

We will create a Testimonial component that will display customer testimonials. You can start by creating a new file called Testimonial.js in the src/components folder and add the following code:

import React from 'react';

const Testimonial = ({ name, comment }) => {
    return (
        

            
{name}
            
{comment}
        
    );
};

export default Testimonial;
    

Displaying Testimonials

Now that we have created the Testimonial component, let’s display some testimonials on the Tiru Restaurant website. You can update the App component in the src folder with the following code:

import React from 'react';
import Testimonial from './components/Testimonial';

const App = () => {
    const testimonials = [
        { name: 'John Doe', comment: 'The food at Tiru Restaurant is amazing! I highly recommend it.' },
        { name: 'Jane Smith', comment: 'I had a wonderful dining experience at Tiru Restaurant. The staff was friendly and the food was delicious.' }
    ];

    return (
        

            {testimonials.map((testimonial, index) => (
                
            ))}
        
    );
};

export default App;
        

Conclusion

Congratulations! You have successfully added a testimonial section to the Tiru Restaurant website using React. Testimonials are a great way to showcase the positive experiences of customers and can help attract new customers to the restaurant. Feel free to customize the testimonial component to match the design of the website and add more testimonials as needed.