پست ها توسط فرشته حقیقی

برای تعریف کمبوباکس در این کامپوننت به صورت زیر عمل می کنیم:

import React from "react";
import ReactDOM from "react-dom";
import ReactDataGrid from "react-data-grid";
import { Editors } from "react-data-grid-addons";


const { DropDownEditor } = Editors;
const issueTypes = [
  { id: "bug", value: "Bug" },
  { id: "epic", value: "Epic" },
  { id: "story", value: "Story" }
];
const IssueTypeEditor = <DropDownEditor options={issueTypes} />;

const columns = [
  { key: "id", name: "ID" },
  { key: "title", name: "Title" },
  { key: "complete", name: "Complete" },
  { key: "issueType", name: "Task Type", editor: IssueTypeEditor }
];

const rows = [
  { id: 0, title: "Task 1", issueType: "Bug", complete: 20 },
  { id: 1, title: "Task 2", issueType: "Story", complete: 40 },
  { id: 2, title: "Task 3", issueType: "Epic", complete: 60 }
];

class Example extends React.Component {
  state = { rows };

  onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    this.setState(state => {
      const rows = state.rows.slice();
      for (let i = fromRow; i <= toRow; i++) {
        rows[i] = { ...rows[i], ...updated };
      }
      return { rows };
    });
  };
  render() {
    return (
      <div>
        <ReactDataGrid
          columns={columns}
          rowGetter={i => this.state.rows[i]}
          rowsCount={3}
          onGridRowsUpdated={this.onGridRowsUpdated}
          enableCellSelect={true}
        />
        <PageGuide />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);

• rowGetter : شماره سطر انتخاب شده
• rowsCount : تعداد سطرها
• onGridRowsUpdated : زمانیکه editor داشته باشیم و یا ستونها قابل ویرایش باشند.
• enableCellSelect : در صورتیکه true باشد این امکان را می دهد که بتوانیم سلول ها را انتخاب کنیم.

react-data-grid یکی از کامپوننت های پر استفاده در react برای ایجاد جدول می باشد. جداولی که با استفاده از این کامپوننت ایجاد می شوند از نظر ظاهری شبیه اکسل می باشند و به همین دلیل این کامپوننت محبوبیت دارد. برای ایجاد جدول با استفاده از این کامپوننت به صورت زیر عمل می کنیم:

import DataGrid from 'react-data-grid';
import 'react-data-grid/dist/react-data-grid.css';
 
const columns = [
  { key: 'id', name: 'ID' },
  { key: 'title', name: 'Title' }
];
 
const rows = [
  { id: 0, title: 'Example' },
  { id: 1, title: 'Demo' }
];
 
function App() {
  return (
    <DataGrid
      columns={columns}
      rows={rows}
    />
  );
}

Localization برای این است که عبارت های پیش فرض در کامپوننت material table را بتوانیم تغییر دهیم. مثلا می توانیم عبارتهای پیش فرض را به زبان کشور خود قرار دهیم. در مثال زیر عبارتها را به زبان آلمانی قرار دادیم.

<MaterialTable
    localization={{
        pagination: {
            labelDisplayedRows: '{from}-{to} von {count}'
        },
        toolbar: {
            nRowsSelected: '{0} Zeile(n) ausgewählt'
        },
        header: {
            actions: 'Aktionen'
        },
        body: {
            emptyDataSourceMessage: 'Keine Einträge',
            filterRow: {
                filterTooltip: 'Filter'
            }
        }
    }}
/>

برای اینکار با استفاده از کامپوننت material-table باید در هنگام تعریف ستونهای جدول، الگوریتم مرتب سازی موردنظر خود را بیان کنیم و همچنین sorting را برابر true قرار دهیم.

function MultipleActions() {
  return (
    <MaterialTable
      title="NAMES"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'lastname', field: 'lastname',
	  customSort: (a, b) => a.name.length - b.name.length },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
       
      ]}
      data={[
        { name: 'Sara', lastname: 'kealq', birthYear: 1987 },
        { name: 'Sam', lastname: 'asefour', birthYear: 2017},
      ]}        
      options={{
        sorting: true
      }}
    />
  )
}

در اینجا، در متد customSort الگوریتم موردنظر خود را تعریف کردیم.

برای اعمال هرگونه الگوریتم جستجو از کلید واژه customFilterAndSearch در کامپوننت material-table استفاده می کنیم. همچنین باید قابلیت filtering را نیز true قرار دهیم.

function MultipleActions() {
  return (
    <MaterialTable
      title="Users"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'account', field: 'account',
	customFilterAndSearch: (term, rowData) => term < rowData.account.length},
       
      ]}
      data={[
        { name: 'Sara', account: '1234567890'},
        { name: 'Sam', account:  '13214569875'},
      ]}        
        options={{
        filtering: true
      }}
      ]}
    />
  )
}

برای قرار دادن دکمه در هر سطر جدول از کلید واژه actions استفاده می کنیم.در actions هر تعداد دکمه ای که بخواهیم می توانیم قرار دهیم.

function MultipleActions() {
  return (
    <MaterialTable
      title="Multiple Actions Preview"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'lastname', field: 'lastname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
       
      ]}
      data={[
        { name: 'Sara', lastname: 'Baran', birthYear: 1987 },
        { name: 'Sam', lastname: 'Baran', birthYear: 2017},
      ]}        
      actions={[
        {
          icon: 'save',
          tooltip: 'Save User',
          onClick: (event, rowData) => alert("You saved " + rowData.name)
        },
        {
          icon: 'delete',
          tooltip: 'Delete User',
          onClick: (event, rowData) => confirm("You want to delete " + rowData.name)
        }
      ]}
    />
  )
}

برای اینکار می توانیم از قابلیت parentChildData در کامپوننت material-table  کنیم.با استفاده از این ویژگی زیرمجموعه های هر سطر زیر آن سطر نمایش داده می شود.

function BasicTreeData() {
  return (
    <MaterialTable
      title=" Tree Data "
      data={[
        {
          id: 1,
          name: 'a',
          surname: 'Baran',
          sex: 'Male',
          type: 'adult',
        },
        {
          id: 2,
          name: 'b',
          surname: 'Baran',
          sex: 'Female',
          type: 'adult',
          parentId: 1,
        },
        {
          id: 3,
          name: 'c',
          surname: 'Baran',
          sex: 'Female',
          type: 'child',
          parentId: 1,
        },
        {
          id: 4,
          name: 'd',
          surname: 'Baran',
          sex: 'Female',
          type: 'child',
          parentId: 3,
        },
        {
          id: 5,
          name: 'e',
          surname: 'Baran',
          sex: 'Female',
          type: 'child',
        },
        {
          id: 6,
          name: 'f',
          surname: 'Baran',
          sex: 'Female',
          type: 'child',
          parentId: 5,
        },
      ]}
      columns={[
        { title: 'name', field: 'name' },
        { title: 'lastname', field: 'lastname' },
        { title: 'sex', field: 'sex' },
        { title: 'type', field: 'type', removable: false },
      
      ]}
      parentChildData={(row, rows) => rows.find(a => a.id === row.parentId)}
     
    />
  )
}

متد parentChildData پدر هر رکورد را پیدا کرده و به آن مرتبط می کند.

اینکار به سادگی با قابلیت filtering قابل انجام است.با استفاده از این قابلیت می توانیم روی همه ستونها یا برخی از ستونها جستجو انجام دهیم.

function CellHeaderStyling() {
  return (
    <MaterialTable
      title=" Styling "
      columns={[
        {
          title: 'Name', field: 'name',
        },
        { title: 'lastname', field: 'lastname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
       
      ]}
      data={[
        { name: 'Sara', lastname: 'Jam', birthYear: 2005},
      ]}
      options={{
        filtering: true
      }}
    />
  )
}

درصورتیکه بخواهیم روی بعضی ستونها فیلترنگ انجام دهیم ستونی که نکی خواهیم فیلترینگ داشته باشد را false می کنیم.

function CellHeaderStyling() {
  return (
    <MaterialTable
      title=" Styling "
      columns={[
        {
          title: 'Name', field: 'name',filtering: false
        },
        { title: 'lastname', field: 'lastname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
       
      ]}
      data={[
        { name: 'Sara', lastname: 'Jam', birthYear: 2005},
      ]}
      options={{
        filtering: true
      }}
    />
  )
}

برای اینکار کافی است از ویژگی selection استفاده کنیم.با استفاده از این قابلیت، یک چک باکس در کنار هر سطر از جدول قرار می گیرد که می توانیم با انتخاب هر سطر، اعمالی که می خواهیم روی سطرها انجام دهیم.

function CellHeaderStyling() {
  return (
    <MaterialTable
      title=" Styling "
      columns={[
        {
          title: 'Name', field: 'name',
        },
        { title: 'lastname', field: 'lastname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
       
      ]}
      data={[
        { name: 'Sara', lastname: 'Jam', birthYear: 2005},
      ]}
      options={{
        selection: true
      }}
    />
  )
}

کامپوننت material-table برای styling  جدول قابلیتهای زیر را دارد:

• cellStyle : برای ستون
• column.headerStyle : برای هدر  یک ستون
• options.headerStyle : برای هدر همه ستونها
• options.rowStyle : برای همه سطرها

در کد زیر رنگ ستون نام و هدر جدول را آبی قرار داده ایم

function CellHeaderStyling() {
  return (
    <MaterialTable
      title=" Styling "
      columns={[
        {
          title: 'Name', field: 'name',
          cellStyle: {
            backgroundColor: '#039be5',
            color: '#FFF'
          },
          headerStyle: {
            backgroundColor: '#039be5',
          }
        },
        { title: 'lastname', field: 'lastname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
       
      ]}
      data={[
        { name: 'Sara', lastname: 'Jam', birthYear: 2005},
      ]}
      options={{
        headerStyle: {
          backgroundColor: '#039be5',
          color: '#FFF'
        }
      }}
    />
  )
}

برای اینکار کامپوننت MaterialTable یک قابلیت به نام detailPanel دارد که اطلاعات اضافه تری را نمایش می دهد.

function MultipleDetailPanels() {
  return (
    <MaterialTable
      title="Multiple Detail Panels Preview"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'lastname', field: 'surname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
      
      data={[
        { name: 'Sara', lastname: 'Jam', birthYear: 1987 },
      ]}
      detailPanel={[
        {
          icon: 'circle',
          tooltip: 'Show Name',
          render: rowData => {
            return (
              <div
                style={{
                  fontSize: 100,
                  textAlign: 'center',
                  color: 'white',
                  backgroundColor: '#6F765',
                }}
              >
                {rowData.name}
              </div>
            )
          },
        },
       },
      ]}
    />
  )
}

در icon  عکس آیکون را می دهیم. هنگامی که کاربر موس  را بر روی این آیکون قرار دهید عبارتی که در tooltip قرار دادیم نمایش داده می  شود.
ممکن است بخواهیم با کلیک برروی هر سطر جدول یک ویدیو نمایش داده شود.برای اینکار بصورت زیر عمل می کنیم.

function DetailPanelWithRowClick() {
  return (
    <MaterialTable
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'lastname', field: 'lastname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
       
      ]}
      data={[
        { name: 'Sara', lastname: 'Jam', birthYear: 2000},
        { name: 'Sam', lastname: 'Rad', birthYear: 1950},
      ]}
      title="Detail Panel With RowClick Preview"
      detailPanel={rowData => {
        return (
          <iframe
            width="100%"
            height="315"
            src="https://www.youtube.com/embed/C0DPdy98e4c"
            frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
          />
        )
      }}
      onRowClick={(event, rowData, togglePanel) => togglePanel()}
    />
  )
}

material-table این قابلیت را فراهم کرده که سطرهای یک جدول را حذف ویرایش و یا سطر جدید اضافه کنیم.برای اینکار باید در تگ MaterialTable ویژگی editable را اضافه کنیم که در  آن اعمال حذف و ویرایش و اضافه را قرار می دهیم.

function Editable() {
  const { useState } = React;

  const [columns, setColumns] = useState([
    { title: 'Name', field: 'name' },
    { title: 'Lastname', field: 'lastname', initialEditValue: 'initial edit value' },
    { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
    
  ]);

  const [data, setData] = useState([
    { name: 'Sara', lastname: 'Jam', birthYear: 1987 },
    { name: 'Soha', lastname: 'Rad', birthYear: 2017},
  ]);

  return (
    <MaterialTable
      title="Names"
      columns={columns}
      data={data}
      editable={{
        onRowAdd: newData =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              setData([...data, newData]);
              
              resolve();
            }, 1000)
          }),
        onRowUpdate: (newData, oldData) =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              const dataUpdate = [...data];
              const index = oldData.tableData.id;
              dataUpdate[index] = newData;
              setData([...dataUpdate]);

              resolve();
            }, 1000)
          }),
        onRowDelete: oldData =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              const dataDelete = [...data];
              const index = oldData.tableData.id;
              dataDelete.splice(index, 1);
              setData([...dataDelete]);
              
              resolve()
            }, 1000)
          }),
      }}
    />
  )
}

درصورتیکه بخواهیم یک ستون یکی از قابلیتها و یا در کل قابلیت ویرایش نداشته باشد باید در  هنگام تعریف آن ستون  آن را قید کنیم

{ title: 'Name', field: 'name', editable: 'onUpdate' },
    { title: 'LastName', field: 'lastName', editable: 'never' },

درصورتیکه نخواهیم دکمه حذف و اضافه داشته باشیم بلکه  با کلیک بر روی هر ستون بتوانیم آن را تغییر دهیم می توانیم از ویژگی cellEditable  و متد onCellEditApproved  استفاده کنیم.

function CellEditable() {
  const { useState } = React;

  const [columns, setColumns] = useState([
    { title: 'Name', field: 'name' },
    { title: 'lastname', field: 'lastname', initialEditValue: 'initial edit value' },
    { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
   
  ]);

  const [data, setData] = useState([
    { name: 'Sara', surname: 'Baran', birthYear: 1987},
    { name: 'Sam', surname: 'Baran', birthYear: 2017 },
  ]);

  return (
    <MaterialTable
      title="Cell Editable Preview"
      columns={columns}
      data={data}
      cellEditable={{
        onCellEditApproved: (newValue, oldValue, rowData, columnDef) => {
          return new Promise((resolve, reject) => {
            setTimeout(resolve, 1000);
          });
        }
      }}
    />
  )
}

زمانیکه یک کمبوباکس بوسیله فراخوانی سرویس پر می شود ممکن است بخواهیم تا هنگامی که کمبوباکس پر  نشده، غیرفعال باشد.برای اینکار یک state تعریف می کنیم و هنگامی که سرویس کمبوباکس در حال فراخوانی است مقدار  آن را false می کنیم.

function CharacterDropDown() {
   const [loading, setLoading] = React.useState(true);
  const [items, setItems] = React.useState([
    { label: "Loading ...", value: "" }
  ]);

  React.useEffect(() => {
    async function getCity() {
      const response = await fetch("https://test.co/city");
      const body = await response.json();
      setItems(body.results.map(({ name }) => ({ label: name, value: name })));
      setLoading(false);

    }
    getCity();
  }, []);

  return (
    <select  disabled={loading}>
      {items.map(item => (
        <option
          key={item.value}
          value={item.value}
        >
          {item.label}
        </option>
      ))}
    </select>
  );
}

MaterialTable کنترل های زیر را بر روی ورودی های فرم فراهم می کند:

• boolean: در صورتیکه ورودی غلط باشد یک خط قرمز زیر آن فیلد قرار می دهد. 

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import MaterialTable from 'material-table'


class App extends Component {

const columns = [
            { title: 'Name', field: 'Name',rowData => rowData.Name !== '' },
            { title: 'LastName', field: 'LastName',validate: rowData => rowData.LastName.length > 3 },
            { title: 'Birth Year', field: 'birthYear', type: 'numeric', validate: rowData => 
  rowData.birthYear > 1900}
          ];


const data = [
   { name: 'Sara', LastName: 'Baran',  birthYear: 1987}
  ];


  render() {
    return (
      <div style={{ maxWidth: '100%' }}>
        <MaterialTable
          columns={columns}
          data={data }
          title="NAMES"
        />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('react-div'));

در اینجا اگر نام خالی باشد و یا اگر فامیل کمتر از 3 کاراکتر و سال تولد کوچکتر از 1900 باشد یک خط قرمز زیر فیلدها قرار می  گیرد.

• string : اگر ورودی صحیح نباشد یک خط قرمز و یک پیغام  نمایش می دهد.

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import MaterialTable from 'material-table'


class App extends Component {

const columns = [
            { title: 'Name', field: 'Name',validate: rowData => rowData.Name=== '' ? 'Name cannot be empty' : '', },
            { title: 'LastName', field: 'LastName', validate: rowData => rowData.LastName.length < 2 ? 'LastName must be have 3 chars' : '',},
            { title: 'Birth Year', field: 'birthYear', type: 'numeric', validate: rowData => rowData.birthYear < 1900 ? 'Birthyear must be after 1900' : '',}
          ];


const data = [
   { name: 'Sarra', LastName: 'Baran', birthYear: 1987}
  ];


  render() {
    return (
      <div style={{ maxWidth: '100%' }}>
        <MaterialTable
          columns={columns}
          data={data }
          title="NAMES"
        />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('react-div'));

material-table یک کامپوننت در react می باشد که ایجاد جدول را سهولت می بخشد.با استفاده از این کامپوننت کافی است ستون ها و داده های جدول را در data و columns در تگ MaterialTable تعریف کنیم.

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import MaterialTable from 'material-table'

class App extends Component {
  render() {
    return (
      <div style={{ maxWidth: '100%' }}>
        <MaterialTable
          columns={[
            { title: 'Name', field: 'Name' },
            { title: 'LastName', field: 'LastName' },
            { title: 'City', field: 'City'}
          ]}
          data={[{ name: 'Sarra', LastName: 'Baran', City: Yazd}]}
          title="Demo Title"
        />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('react-div'));

میتوانیم ستونها و داده ها را در یک متغیر قرار دهیم و  سپس از  این متغیرها در تگ MaterialTable استفاده کنیم.

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import MaterialTable from 'material-table'


class App extends Component {

const columns = [
            { title: 'Name', field: 'Name' },
            { title: 'LastName', field: 'LastName' },
            { title: 'City', field: 'City'}
          ];


const data = [
   { name: 'Sarra', LastName: 'Baran', City: Yazd}
  ];


  render() {
    return (
      <div style={{ maxWidth: '100%' }}>
        <MaterialTable
          columns={columns}
          data={data }
          title="NAMES"
        />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('react-div'));

این کامپوننت قابلیتهای زیادی دارد مانند مرتب سازی دادها، فیلترینگ داده ها و غیره.برای انجام این کارها، به صورت زیر عمل می کنیم:

<MaterialTable
      title="NAMES"
      data={data}
      columns={columns}
      options={{ search: true, paging: false, filtering: true,sorting:true }}
/>

برای اینکار  باید خروجی سرویس  را در  یک state  قرار دهیم.فرض کنیم یک کمبوباکس داریم که می خواهیم با نام شهرها پر شود.

function CharacterDropDown() {
  const [items, setItems] = React.useState([]);

  React.useEffect(() => {
    async function getCity() {
      const response = await fetch("https://test.co/city");
      const body = await response.json();
      setItems(body.results.map(({ name }) => ({ label: name, value: name })));
    }
    getCity();
  }, []);

  return (
    <select>
      {items.map(item => (
        <option
          key={item.value}
          value={item.value}
        >
          {item.label}
        </option>
      ))}
    </select>
  );
}

Axios برای درخواستهای  XMLHttpRequests یک API  فراهم می کند که بصورت زیر یک درخواست post را ارسال می  کند.فرض کنیم یک سایت وجود دارد مثلا  یک سایت خرید که خریدار اطلاعات خود را ارسال کرده و سپس سایت برای او یک کد رهگیری ارسال می کند.ارسال درخواست بصورت زیر انجام می شود

componentDidMount() {
    const req = { name: 'sara' };
    axios.post('https://reqres.in/api/register ', req )
        .then(response => this.setState({ reqId: response.data.id }));
}

بعد از اینکه id برگردانده شد می توانیم آن را در  کامپوننت  ()render نمایش دهیم.

برای اینکار باید اطلاعات دیتابیس را داده و سپس یک درخواست  get به دیتابیس ارسال کرده و  کوئری خود را اجرا کنیم.

const connection = mysql.createPool({
  host     : 'localhost', 
  user     : 'root',     
  password : '',       
  database : 'myDatabase'  
});

const app = express();

app.get('/users', function (req, res) {
    connection.getConnection(function (err, connection) {
    connection.query('SELECT * FROM users', function (error, results) {
      if (error) throw error;
      else
      res.send(results)
    });
  });
});

برای اینکار باید مقدار موردنظر را در یک state ذخیره کرده و سپس برای برای غیرفعال کردن دکمه مقدار این state را بررسی  کنیم.

function App() {
  const [course] = React.useState("react");

  const greet = () => alert("Hi there! :)");

  return (
    <button onClick={greet} disabled={"react" === course? false : true}>
     choose course
    </button>
  );
}

می توانیم مقدار state  را درون یک if بررسی کنیم:

function App() {
  let disabled = true;

  const [course] = React.useState("react");

  const greet = () => alert("Hi there! :)");

  if ("react" === course) {
    disabled = undefined;
  }

  return (
    <button onClick={greet} disabled={disabled}>
      choose course
    </button>
  );
}

در اینجا در  if  برای اینکه disabled را false  کنیم  مقدار  فیلد disabled را undefined  قرار  دادیم.زمانیکه مقدار فیلد راundefined و یا null  قرار دهیم react  مقدار فیلد را false قرار می دهد.برای اینکه مقدار  فیلد را  false  کنیم می توانستیم مستقیما  مقدار فیلد disabled را fasle قرار دهیم.

فرض کنیم در فرم خود یک جدول و یک دکمه داریم و  میخواهیم با کلیک بر روی دکمه سطر جدیدی به جدول اضافه شود.برای این کار بصورت زیر  عمل می  کنیم:

import React, { useState } from 'react';

function App() {
    const [rows , setRows] = useState([
        { id: 1,  name: 'احمدی', email: 'ahmadi@omh.net', role: 'کارمند' },
        { id: 2, name: 'سعیدی', email: 'saeed@mmj.org', role: 'دانشجو' },
       
        
    ]);

   function addRow() {
        var rows = this.state.rows
        rows.push( { id: 3, name: 'حقیقی', email: 'hagh@hgf.com', role: 'کارمند' })
        this.setState({rows: rows})
    },
    return (
        <div className="container">
            <h3 className="p-3 text-center">اسامی </h3>
            <table className="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>نام</th>
                        <th>ایمیل</th>
                        <th>شغل</th>
                    </tr>
                </thead>
                <tbody>
                    {users && users.map(user =>
                        <tr key={user.id}>
                            <td>{user.name} </td>
                            <td>{user.email}</td>
                            <td>{user.role}</td>
                        </tr>
			<tr>
		           <button id="addBtn" onClick={addRow}>ADD</button>
			</tr>

                    )}
                </tbody>
            </table>
        </div>
    );
}

export { App };