how to pass data between react component in spfx

how to pass data from parent to child and child to parent component 

npm and gulp commands in spfx

SPFX(gulp) and NPM basic commands 

yo @microsoft/sharepoint

gulp build

gulp serve

gulp serve --nobrowser

gulp bundle

gulp bundle --ship

gulp package-solution

gulp package-solution --ship

gulp clean

To check the list of globally installed compiler in npm

npm ls -g --depth=0

Result:

E:\SharePointFrameWorkDEV\ReactSPFXSolution>npm ls -g --depth=0

C:\Users\m.muqtdeer\AppData\Roaming\npm

+-- @angular/cli@8.3.22

+-- @microsoft/generator-sharepoint@1.10.0

+-- gulp@4.0.2

+-- npm@6.13.6

+-- typescript@3.7.5

`-- yo@3.1.1

To check the version of  current package and new version  when upgrading the current solution 

npm outdated

Result:

E:\SharePointFrameWorkDEV\ReactSPFXSolution>npm outdated

Package                             Current   Wanted   Latest  Location

@microsoft/rush-stack-compiler-2.9   0.7.16   0.7.16   0.10.1  student-details

@microsoft/rush-stack-compiler-3.3    0.3.5    0.3.5    0.5.1  student-details

@pnp/common                           1.3.9    1.3.9    2.0.0  student-details

@pnp/graph                            1.3.9    1.3.9    2.0.0  student-details

@pnp/logging                          1.3.9    1.3.9    2.0.0  student-details

@pnp/odata                            1.3.9    1.3.9    2.0.0  student-details

@pnp/sp                               1.3.9    1.3.9    2.0.0  student-details

@types/chai                          3.4.34   3.4.34    4.2.7  student-details

@types/es6-promise                   0.0.33   0.0.33    3.3.0  student-details

@types/mocha                         2.2.38   2.2.38    5.2.7  student-details

@types/react                         16.8.8   16.8.8  16.9.18  student-details

@types/react-dom                     16.8.3   16.8.3   16.9.5  student-details

@types/webpack-env                   1.13.1   1.13.1   1.15.0  student-details

ajv                                   5.2.5    5.2.5   6.11.0  student-details

gulp                                  3.9.1    3.9.1    4.0.2  student-details

office-ui-fabric-react              6.189.2  6.189.2   7.83.2  student-details

react                                16.8.5   16.8.5  16.12.0  student-details

react-dom                            16.8.5   16.8.5  16.12.0  student-details

styled-components                     4.4.1    4.4.1    5.0.0  student-details

To check globally installed  package

npm outdated -g

E:\SharePointFrameWorkDEV\ReactSPFXSolution>npm outdated -g

Package       Current  Wanted  Latest  Location

@angular/cli   8.3.22  8.3.23  8.3.23  global

read row data in html table using jQuery

15555	2	3	4	5
row2	2	3	4	888
1	2	3	4	99
1	2	3	4	666
1	2	3	4	77

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

   $('#dtTable tbody').on('click', 'td.details-control', function () {

var tr = $(this).closest('tr');

    var row = ReadRowData(tr);

        alert(row);     

    });

});

function ReadRowData(tr)

{

    var rowData=[];   

    $('td', tr).each(function () 

{  

rowData.push($(this).html());

});  

    return rowData;

}

</script>

<table id="dtTable" border="1" width="100%">

<tbody>

<tr><td class="details-control"><span>1</span><span>5555</span></td><td>2</td><td>3</td><td>4</td><td>5</td</tr>

<tr><td class="details-control">row2</td><td>2</td><td>3</td><td>4</td><td>888</td</tr>

<tr><td class="details-control">1</td><td>2</td><td>3</td><td>4</td><td>99</td</tr>

<tr><td class="details-control">1</td><td>2</td><td>3</td><td>4</td><td>666</td</tr>

<tr><td class="details-control">1</td><td>2</td><td>3</td><td>4</td><td>77</td</tr>

</tbody>

</table>

google chart in spfx

To Show google chart in SPFX below are steps to follow

1. open the config.json file and add below enetry in external section

"externals": {
  "google": {
"path": "https://www.gstatic.com/charts/loader.js",
"globalName": "google"
  }
}
2. add below div tag in your html
<div id="pie-chart"></div>
3. create a google.d.ts file under the webpart folder inside src folder.
4. add below code in google.d.ts as a module

declare module "google" {
  interface IGoogle {
  charts: any;
  visualization: any;
  }
  var google: IGoogle;
  export = google;
}

5. now import the google module in webpart where you want to add graph

    import * as google from 'google';

6. add below code on OnInt method


public onInit(): Promise<void>
  {
google.charts.load("current", { packages: ["corechart"] });
return super.onInit();
  }

7. create a fucntion to LoadGoogleChart a chart
   
private LoadGoogleChart(arrayDataTable) {

// to add legend and first row in array
arrayDataTable.splice(0, 0, ['TaskList', 'Hours',{ role: 'annotation'}]);

     let data =google.visualization.arrayToDataTable(arrayDataTable);

const options = {
  title: 'My Daily Work',
  pieHole: 0.4,
};

const chart = new google.visualization.PieChart(document.getElementById('pie-chart'));
chart.draw(data, options);
  }

8. finally call your fucntion on button click or page load and pass the data in LoadGoogleChart() method as array
 
   private GraphData()
   {
  let graphDataArray=[];
  graphDataArray.push(['Work', 11]);
  graphDataArray.push(['Eat', 2]);
  graphDataArray.push(['Commute', 2]);
  graphDataArray.push(['Watch TV', 2]);
  graphDataArray.push(['Sleep', 7]);
  google.charts.setOnLoadCallback(webpart.LoadGoogleChart(graphDataArray));
   }