Question 3

Design and develop a functional component in React-JS that

• Displays a 5 Vehicle Info Card in a row with details like Model, Manufacturer, Year, and Fuel Type.
• Use inline CSS to style the card layout and appearance.

VehicleCard.jsx

import React from "react";
import PropTypes from "prop-types";

const vehicles = [
  { model: "Tesla Model S", manufacturer: "Tesla", year: 2022, fuelType: "Electric" },
  { model: "Ford Mustang", manufacturer: "Ford", year: 2021, fuelType: "Gasoline" },
  { model: "Chevrolet Bolt", manufacturer: "Chevrolet", year: 2022, fuelType: "Electric" },
  { model: "BMW 3 Series", manufacturer: "BMW", year: 2021, fuelType: "Diesel" },
  { model: "Audi A6", manufacturer: "Audi", year: 2023, fuelType: "Hybrid" },
];

function VehicleCard() {
  return ( <div style={containerStyle}>
	  {vehicles.map( ({ model, manufacturer, year, fuelType })=> (
	    <div style={cardStyle}>
	        <h2 style={headingStyle}>Vehicle Information</h2>
	          <p style={infoStyle}>
	              <strong>Model:</strong> {model}
	          </p>
	          <p style={infoStyle}>
	              <strong>Manufacturer:</strong> {manufacturer}
	          </p>
	          <p style={infoStyle}>
	              <strong>Year:</strong> {year}
	          </p>
	          <p style={infoStyle}>
	              <strong>Fuel Type:</strong> {fuelType}
	          </p>
	      </div>))}    
  </div>
);
}

VehicleCard.propTypes = {
  model: PropTypes.string.isRequired,
  manufacturer: PropTypes.string.isRequired,
  year: PropTypes.number.isRequired,
  fuelType: PropTypes.string.isRequired,
};
const containerStyle={
  display: 'flex',
  flexWrap: 'wrap',
  justifyContent: 'space-around',
  padding: '20px'
}

const cardStyle = {
width: "200px",
padding: "20px",
border: "1px solid #ccc",
borderRadius: "10px",
backgroundColor: "#f9f9f9",
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
textAlign: "center",
fontFamily: "'Arial', sans-serif",
margin: "10px",
};

const headingStyle = {
fontSize: "18px",
fontWeight: "bold",
color: "#333",
marginBottom: "15px",
};

const infoStyle = {
fontSize: "14px",
color: "#555",
marginBottom: "10px",
};

export default VehicleCard;

App.js just returns <VehicleCard />

Version passing props from App

VehicleCard.jsx

import React from "react";

function VehicleCard({ model, manufacturer, year, fuelType }) {
  return (
    <div style={cardStyle}>
	    <h2 style={headingStyle}>Vehicle Information</h2>
	        <p style={infoStyle}>
	            <strong>Model:</strong> {model}
	        </p>
	        <p style={infoStyle}>
	            <strong>Manufacturer:</strong> {manufacturer}
	        </p>
	        <p style={infoStyle}>
	            <strong>Year:</strong> {year}
	        </p>
	        <p style={infoStyle}>
	            <strong>Fuel Type:</strong> {fuelType}
	        </p>
    </div>
  );
}

const cardStyle = {
width: "200px",
padding: "20px",
border: "1px solid #ccc",
borderRadius: "10px",
backgroundColor: "#f9f9f9",
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
textAlign: "center",
fontFamily: "'Arial', sans-serif",
margin: "10px",
};

const headingStyle = {
fontSize: "18px",
fontWeight: "bold",
color: "#333",
marginBottom: "15px",
};

const infoStyle = {
fontSize: "14px",
color: "#555",
marginBottom: "10px",
};
  
export default VehicleCard;

App.jsx

import React from "react";
import VehicleCard from "./VehicleCard";

const vehicles = [
  { model: "Tesla Model S", manufacturer: "Tesla", year: 2022, fuelType: "Electric" },
  { model: "Ford Mustang", manufacturer: "Ford", year: 2021, fuelType: "Gasoline" },
  { model: "Chevrolet Bolt", manufacturer: "Chevrolet", year: 2022, fuelType: "Electric" },
  { model: "BMW 3 Series", manufacturer: "BMW", year: 2021, fuelType: "Diesel" },
  { model: "Audi A6", manufacturer: "Audi", year: 2023, fuelType: "Hybrid" },
];

function App() {
  return (
    <div style={containerStyle}>
      {vehicles.map( ( vehicle, index ) => (
        <VehicleCard
          key={index}
          {...vehicle}
        />
      ))}
    </div>
  );
}

const containerStyle = {
  display: "flex",
  flexWrap: "wrap",
  justifyContent: "space-around",
  padding: "20px",
};
  
export default App;

Trick

Used Spread Operator ...vehicle to pass all the items instead of passing separately

<div style={containerStyle}>
  {vehicles.map( ( vehicle, index ) => (
	<VehicleCard
	  key={index}
	  {...vehicle}
	/>
  ))}
</div>

<div style={containerStyle}>
  {vehicles.map( ( {model, manufacturer, year, fuelType} ) => (
	<VehicleCard
	  key={model}
	  model={model}
	  manufacturer={manufacturer}
	  year={year}
	  fuelType={fuelType}
	/>
  ))}
</div>

Proptype for the Card

npm install prop-types

import PropTypes from "prop-types";

VehicleCard.propTypes = {
  model: PropTypes.string.isRequired,
  manufacturer: PropTypes.string.isRequired,
  year: PropTypes.number.isRequired,
  fuelType: PropTypes.string.isRequired,
};

TypeScript, current usage

type VehicleCardProps = {
  model: string;
  manufacturer: string;
  year: number;
  fuelType: string;
};