goelashwin36

import React, { Component } from 'react';

import { Table, Card, Button, CardTitle, CardText, Row, Col, CardImg } from 'reactstrap';

class Product extends Component {
    constructor() {
        super();

        this.state = {
            products: [{ "name": "KTM Duke", "img": "1.jpg", "id": 1, "price": "2 lakh", "engine": "299 cc" },

goelashwin36

class Greeting extends React.Component {
     render(){
         return <h1>Hi, I’m a smart component!</h1>;
     }
 }

goelashwin36

const Greeting = () => <h1>Hi, I’m a dumb component!</h1>;

goelashwin36

<Table>
   <thead>
       <th width="33.33%">Name</th>
       <th width="33.33%">Price</th>
       <th width="33.33%">Engine</th>
   </thead>
   {temp.map((product) => (
       <tbody>
           <tr>
               <td width="33.33%">{product.name}</td>

goelashwin36

let temparr = this.state.compare.arr

let temp = []  // Array of objects which we need to compare
// Iterating in temparr
for (var i = 0; i < temparr.length; i++) {
  // x is the object from `this.state.products` which has the required id
    let x = this.state.products.find(prod => prod.id == temparr[i]);
    temp.push(x)
    }

goelashwin36

// e is the event. For example here the event is `click`. 
// This variable has some information like: name, id etc. of the component which fired it.
handleClick(e) {
     // Creating a duplicate of arr variable of state
     let temparr = this.state.compare.arr;
     // e.target.id returns the id of the button which fired the event.
     //This helps us in identifying the component
     let id = temparr.indexOf(e.target.id)
     //Checking if the component is already present in the arr variable or    not
     if (id != -1) {

goelashwin36

<Row>
   {this.state.products.map((product, index) => (
       <Col key={product.id}  md="2" lg="2">
           <Card body outline engine="primary">
               <img height="120px" width="240px" src={require("../assets/images/" + product.img)}/>
               <CardTitle>{product.name}</CardTitle>
               <Button type="button" id={product.id} onClick=   {this.handleClick}>Button</Button>
           </Card>
       </Col>
   ))}

goelashwin36

<Row>
     <Col md="2" lg="2">
          <Card body outline engine="primary">
            <img height="120px" width="240px" src={require("../assets/images/1.jpg")} />
             <CardTitle>Title</CardTitle>
              <Button type="button">Button</Button>
          </Card>
     </Col>
</Row>

goelashwin36

import { Table, Card, Button, CardTitle, CardText, Row, Col, CardImg } from 'reactstrap';

goelashwin36

this.state = {
        products: [{ "name": "KTM Duke", "img": "1.jpg", "id": 1, "price":   "2 lakh", "engine": "299 cc" },
        { "name": "KTM RC", "img": "2.jpg", "id": 2, "price": "2.2 lakh",   "engine": "299 cc" },
        { "name": "Ninja", "img": "3.jpg", "id": 3, "price": "3.7 lakh",   "engine": "350 cc" },
        { "name": "BMW S", "img": "4.jpg", "id": 4, "price": "6.8 lakh",   "engine": "800 cc" },
        { "name": "Hayabusa", "img": "5.jpg", "id": 5, "price": "9.2 lakh",   "engine": "1340 cc" },
        ],
        compare: {
          // The arr variable stores the id of selected components
            arr: []