Come Eseguire Operazioni CRUD usando React, React Hooks e Axios

Articolo originale: How to Perform CRUD Operations using React, React Hooks, and Axios

Se stai lavorando con React, comprendere e implementare le richieste API può essere piuttosto difficile.

In questo articolo impareremo come funziona il tutto, implementando operazioni CRUD (Creazione, Lettura,  Aggiornamento, Eliminazione) usando React, gli hook di React, React Router e Axios.

Iniziamo.

Come Installare Node e npm

Per prima cosa occorre installare Node nel nostro sistema. Lo useremo principalmente per eseguire il nostro codice Javascript.

Per scaricare Node, vai su https://nodejs.org/it/.

Ti servirà anche il gestore di pacchetti di node, o npm, che è incorporato in Node. Puoi usarlo per installare pacchetti per le tue app Javascript. Fortunatamente è incluso assieme a Node, quindi non serve scaricarlo separatamente.

Una volta terminata l'installazione, apri un terminale o prompt dei comandi e digita node -v per verificare quale versione di Node hai.

Come Creare la Tua Applicazione React

Per creare un'applicazione React digita npx create-react-app <nome app> nel terminale, oppure, in questo caso, npx create-react-appreact-crud.

Vedrai che verranno installati dei pacchetti.

Una volta completata l'operazione, spostati all'interno della cartella del progetto e digita npm start.

Vedrai il template predefinito di React, come questo:

Come installare il pacchetto Semantic UI per React

Adesso, installiamo nel progetto il pacchetto Semantic UI React. Semantic UI è una libreria di interfacce utente fatta per React che ha componenti di interfaccia utente preconfezionati come tabelle, bottoni e molte altre funzionalità.

Puoi installarlo usando uno dei comandi qui sotto, a seconda del tuo gestore di pacchetti.

yarn add semantic-ui-react semantic-ui-css

npm install semantic-ui-react semantic-ui-css

Occorre anche importare la libreria nel file principale dell'applicazione, vale a dire index.js.

import 'semantic-ui-css/semantic.min.css'

Come Costruire l'Applicazione CRUD

Ora iniziamo a costruire l'Applicazione CRUD usando React.

Per prima cosa aggiungeremo un'intestazione all'applicazione.

Nel file App.js, aggiungi un'intestazione in questo modo:

import './App.css';

function App() {
  return (
    <div>
      React Crud Operations
    </div>
  );
}

export default App;

Ora assicuriamoci che sia centrata.

Dai all'attributo className del div genitore il valore main. Nel file App.css, useremo Flexbox per centrare l'intestazione.

import './App.css';

function App() {
  return (
    <div className="main">
      React Crud Operations
    </div>
  );
}

export default App;

.main{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Ora l'intestazione è centrata perfettamente.

Così sembra un po' meglio, dobbiamo renderla in grassetto e aggiungere un font carino. Per farlo useremo dei tag di intestazione in cui inseriremo l'intestazione, in questo modo:

import './App.css';

function App() {
  return (
    <div className="main">
      <h2 className="main-header">React Crud Operations</h2>
    </div>
  );
}

export default App;

Ora importiamo un font da Google Font. Vai su https://fonts.google.com/ per sceglierne uno.

Scegli un font qualsiasi di tuo gradimento, per questo articolo io userò la famiglia di font Montserrat.

Importa il font nel file App.css, in questo modo:

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

Ora cambiamo il font dell'intestazione.

<div className="main">
      <h2 className="main-header">React Crud Operations</h2>
</div>

Dai al tag di intestazione un attributo className del valore di main-header, come si vede sopra.

Qundi nel file  App.css, aggiungi la proprietà font-family:

.main-header{
  font-family: 'Montserrat', sans-serif;
}

Ora vedrai che l'aspetto dell'intestazione è cambiato.

Come Creare i tuoi Componenti CRUD

Andremo a creare quattro componenti CRUD che saranno Create per la creazione, Read per la lettura, Update per l'aggiornamento e Delete per l'eliminazione.

All'interno della cartella src, crea una cartella chiamata components e all'interno di questa crea 3 file: create.js, read.js e update.js. Per le operazioni di eliminazione non servono componenti extra.

Ora implementiamo l'operazione di creazione.

Per fare questo dobbiamo usare l'API Mock. Questa API invia dati fittizi a un server che ora creeremo, solo a scopo di apprendimento.

Vai su https://mockapi.io/ e crea un account.

Crea un progetto facendo click sul bottone con il segno più.

Aggiungi il nome del progetto e clicca sul bottone Create.

Ora crea una nuova risorsa facendo click sul bottone NEW RESOURCE.

Ti verrà chiesto il nome della risorsa (Resource Name), per cui puoi digitare un nome a piacimento.

Elimina i campi extra come name, avatar, o createdAt, in quanto non necessari. Infine fai click su Create.

Ora abbiamo creato la nostra API per i dati fittizi, che io ho chiamato fakeData.

Clicca su fakeData (o il nome che hai scelto), e vedrai aprirsi una nuova scheda nel browser che mostra il contenuto del database, attualmente vuoto.

Come Creare un Form per il Componente Create

Useremo un form dalla libreria Semantic UI.

Vai su Semantic React e cerca "Form" nella barra di ricerca sulla sinistra.

Vedrai un form come questo, quindi fai click sul bottone "Try it" in alto a destra per fare apparire il codice.

Copia e incolla il codice nel file create.js in questo modo:

import React from 'react'
import { Button, Checkbox, Form } from 'semantic-ui-react'

const Create = () => (
    <Form>
        <Form.Field>
            <label>First Name</label>
            <input placeholder='First Name' />
        </Form.Field>
        <Form.Field>
            <label>Last Name</label>
            <input placeholder='Last Name' />
        </Form.Field>
        <Form.Field>
            <Checkbox label='I agree to the Terms and Conditions' />
        </Form.Field>
        <Button type='submit'>Submit</Button>
    </Form>
)

export default Create;

Importa il componente Create nel file App.js.

import './App.css';
import Create from './components/create';

function App() {
  return (
    <div className="main">
      <h2 className="main-header">React Crud Operations</h2>
      <div>
        <Create/>
      </div>
    </div>
  );
}

export default App;

In questo modo:

Qui c'è un problema, gli elementi non sono propriamente allineati e il colore delle etichette per le caselle di testo è nero, quindi cambiamolo.

Nel file create.js, dai all'attributo className di Form il valore di create-form.

import React from 'react'
import { Button, Checkbox, Form } from 'semantic-ui-react'

const Create = () => (
    <Form className="create-form">
        <Form.Field>
            <label>First Name</label>
            <input placeholder='First Name' />
        </Form.Field>
        <Form.Field>
            <label>Last Name</label>
            <input placeholder='Last Name' />
        </Form.Field>
        <Form.Field>
            <Checkbox label='I agree to the Terms and Conditions' />
        </Form.Field>
        <Button type='submit'>Submit</Button>
    </Form>
)

export default Create;

Quindi aggiungi la seguente classe al file App.css:

.create-form label{
  color: whitesmoke !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px !important;
}

Questa classe si applicherà a tutte le etichette del form alle quali verrà dato il colore whitesmoke. Anche il font viene modificato incrementandone la dimensione.

Ora, nella classe main, aggiungi una proprietà flex-direction. Questa proprietà imposterà la visualizzazione degli elementi su colonne, in modo che ogni elemento con className main venga allineato verticalmente.

.main{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #212121;
  color: whitesmoke;
  flex-direction: column;
}

Ora puoi vedere che il form ha un aspetto migliore.

Successivamente, stampiamo i dati ottenuti dai campi del form nella console. Per fare questo useremo l'hook  di React useState.

Nel file create.js, importa useState da React.

import React, { useState } from 'react';

Poi crea gli stati per il nome (firstName), il cognome (lastName) e la casella di spunta. Inizializza tutti gli stati come vuoti o false.

import React, { useState } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'

export default function Create() {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);
    return (
        <div>
            <Form className="create-form">
                <Form.Field>
                    <label>First Name</label>
                    <input placeholder='First Name' />
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input placeholder='Last Name' />
                </Form.Field>
                <Form.Field>
                    <Checkbox label='I agree to the Terms and Conditions' />
                </Form.Field>
                <Button type='submit'>Submit</Button>
            </Form>
        </div>
    )
}

Puoi vedere che adesso sta agendo come un componente funzionale. Quindi dobbiamo dobbiamo cambiare il componente in un componente funzionale. Questo perché possiamo usare gli hook solo in componenti funzionali.

Ora impostiamo il nome, il cognome e la casella di spunta usando rispettivamente le proprietà setFirstName, setLastName e setCheckbox.

<input placeholder='First Name' onChange={(e) => setFirstName(e.target.value)}/>

<input placeholder='Last Name' onChange={(e) => setLastName(e.target.value)}/>

<Checkbox label='I agree to the Terms and Conditions' onChange={(e) => setCheckbox(!checkbox)}/>

Stiamo catturando gli stati per il nome, cognome e casella di spunta.

Crea una funzione postData che useremo per inviare dati all'API. All'interno della funzione scrivi questo codice:

const postData = () => {
        console.log(firstName);
        console.log(lastName);
        console.log(checkbox);
}

Stiamo stampando i valori di nome (firstName), cognome (lastName) e casella di spunta (checkbox) nella console.

Assegna all'evento onClick del pulsante Submit la funzione postData in modo che venga chiamata ogni volta che si fa click sul pulsante.

<Button onClick={postData} type='submit'>Submit</Button>

Ecco l'intero codice per il file create.js:

import React, { useState } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'

export default function Create() {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);
    const postData = () => {
        console.log(firstName);
        console.log(lastName);
        console.log(checkbox);
    }
    return (
        <div>
            <Form className="create-form">
                <Form.Field>
                    <label>First Name</label>
                    <input placeholder='First Name' onChange={(e) => setFirstName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input placeholder='Last Name' onChange={(e) => setLastName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <Checkbox label='I agree to the Terms and Conditions' onChange={(e) => setCheckbox(!checkbox)}/>
                </Form.Field>
                <Button onClick={postData} type='submit'>Submit</Button>
            </Form>
        </div>
    )
}

Digita qualche valore nei campi del form e seleziona la casella di spunta. Poi fai click sul pulsante Submit. Vedrai apparire i dati nella console, in questo modo:

Come Usare Axios per Inviare Richieste all'API Mock

Usiamo Axios per inviare i dati del form al server.

Per prima cosa occorre installare Axios.

Digita semplicemente npm i axios per installare il pacchetto.

Dopo avere installato il pacchetto iniziamo l'operazione di creazione.

Importa Axios all'inizio del file.

import axios from 'axios';

Nella funzione postData, useremo Axios per inviare una richiesta di tipo POST.

const postData = () => {
        axios.post(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`, {
            firstName,
            lastName,
            checkbox
        })
    }

Come puoi vedere stiamo usando axios.post. I parametri passati alla funzione sono l'endpoint dell'API, che abbiamo creato in precedenza, e un oggetto che contiene i dati dei campi del form.

Quando facciamo click sul bottone Submit, verrà chiamata questa funzione che invierà i dati al server API.

Digita il tuo nome, cognome e seleziona la casella di spunta. Clicca su Submit.

Successivamente, se controlli l'API, vedrai i tuoi nome, cognome e il valore della casella di spunta come true impacchettati in un oggetto.

Come Implementare le Operazioni di Lettura e Aggiornamento

Per l'operazione di lettura occorre creare una pagina Read. Ci servirà anche il pacchetto React Router per navigare tra le varie pagine.

Vai su https://reactrouter.com/web/guides/quick-start e installa il pacchetto usando npm i react-router-dom.

Dopo l'installazione occorre importare nel file App.js quanto segue da React Router:

import { BrowserRouter as Router, Route } from 'react-router-dom'

In App.js inserisci il componente <Router> come elemento genitore nell'istruzione di return, il che significa che qualsiasi cosa si trovi come figlio di quel componente sarà in grado di usare le rotte in React.

import './App.css';
import Create from './components/create';
import { BrowserRouter as Router, Route } from 'react-router-dom'

function App() {
  return (
    <Router>
      <div className="main">
        <h2 className="main-header">React Crud Operations</h2>
        <div>
          <Create />
        </div>
      </div>
    </Router>
  );
}

export default App;

Ora App.js apparirà come sopra.

Sostituisci <Create /> all'interno dell'istruzione return aggiungendo il seguente codice:

import './App.css';
import Create from './components/create';
import { BrowserRouter as Router, Route } from 'react-router-dom'

function App() {
  return (
    <Router>
      <div className="main">
        <h2 className="main-header">React Crud Operations</h2>
        <div>
          <Route exact path='/create' component={Create} />
        </div>
      </div>
    </Router>
  );
}

export default App;

Qui stiamo usando il componente Route come Create. Abbiamo associato la rotta '/create' al componente Create. Quindi se vai su http://localhost:3000/create, vedrai la pagina presentata dal componente Create.

Analogamente, ci servono rotte per lettura (read) e aggiornamento (update).

import './App.css';
import Create from './components/create';
import Read from './components/read';
import Update from './components/update';
import { BrowserRouter as Router, Route } from 'react-router-dom'

function App() {
  return (
    <Router>
      <div className="main">
        <h2 className="main-header">React Crud Operations</h2>
        <div>
          <Route exact path='/create' component={Create} />
        </div>
        <div style={{ marginTop: 20 }}>
          <Route exact path='/read' component={Read} />
        </div>

        <Route path='/update' component={Update} />
      </div>
    </Router>
  );
}

export default App;

Quindi crea le due rotte read e update come si vede qui sopra.

Se vai su http://localhost:3000/read, vedrai quanto segue:

Su http://localhost:3000/update, vedrai il componente Update in questo modo:

Operazione di Lettura

Per l'operazione di lettura ci servirà un componente Table, pertanto portiamoci su React Semantic UI e utilizziamo una tabella dalla libreria.

import React from 'react';
import { Table } from 'semantic-ui-react'
export default function Read() {
    return (
        <div>
            <Table singleLine>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>Name</Table.HeaderCell>
                        <Table.HeaderCell>Registration Date</Table.HeaderCell>
                        <Table.HeaderCell>E-mail address</Table.HeaderCell>
                        <Table.HeaderCell>Premium Plan</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    <Table.Row>
                        <Table.Cell>John Lilki</Table.Cell>
                        <Table.Cell>September 14, 2013</Table.Cell>
                        <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
                        <Table.Cell>No</Table.Cell>
                    </Table.Row>
                    <Table.Row>
                        <Table.Cell>Jamie Harington</Table.Cell>
                        <Table.Cell>January 11, 2014</Table.Cell>
                        <Table.Cell>jamieharingonton@yahoo.com</Table.Cell>
                        <Table.Cell>Yes</Table.Cell>
                    </Table.Row>
                    <Table.Row>
                        <Table.Cell>Jill Lewis</Table.Cell>
                        <Table.Cell>May 11, 2014</Table.Cell>
                        <Table.Cell>jilsewris22@yahoo.com</Table.Cell>
                        <Table.Cell>Yes</Table.Cell>
                    </Table.Row>
                </Table.Body>
            </Table>
        </div>
    )
}

Qui puoi vedere che abbiamo una tabella con alcuni dati fittizi, ma ci serve solo un componente Table.Row, per cui eliminiamo il resto.

import React from 'react';
import { Table } from 'semantic-ui-react'
export default function Read() {
    return (
        <div>
            <Table singleLine>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>Name</Table.HeaderCell>
                        <Table.HeaderCell>Registration Date</Table.HeaderCell>
                        <Table.HeaderCell>E-mail address</Table.HeaderCell>
                        <Table.HeaderCell>Premium Plan</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    <Table.Row>
                        <Table.Cell>John Lilki</Table.Cell>
                        <Table.Cell>September 14, 2013</Table.Cell>
                        <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
                        <Table.Cell>No</Table.Cell>
                    </Table.Row>
                </Table.Body>
            </Table>
        </div>
    )
}

Questo è il risultato della pagina Read. Abbiamo una tabella con quattro colonne, ma ne servono solo tre.

Rimuovi le colonne extra e rinomina i campi in questo modo:

Ed ecco come si presenta la pagina Read:

import React from 'react';
import { Table } from 'semantic-ui-react'
export default function Read() {
    return (
        <div>
            <Table singleLine>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>First Name</Table.HeaderCell>
                        <Table.HeaderCell>Last Name</Table.HeaderCell>
                        <Table.HeaderCell>Checked</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    <Table.Row>
                        <Table.Cell>Nishant</Table.Cell>
                        <Table.Cell>Kumar</Table.Cell>
                        <Table.Cell>Yes</Table.Cell>
                    </Table.Row>
                </Table.Body>
            </Table>
        </div>
    )
}

Ora inviamo la richiesta GET per ottenere i dati dall'API.

Ci servono i dati quando l'applicazione si carica. Quindi useremo l'hook useEffect.

import React, { useEffect } from 'react';

 useEffect(() => {
       
 }, [])

Crea uno stato che conterrà i dati in arrivo. Questo sarà un array.

import React, { useEffect, useState } from 'react';

const [APIData, setAPIData] = useState([]);
useEffect(() => {
       
}, [])

Dall'hook useEffect inviamo la richiesta GET.

 useEffect(() => {
        axios.get(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`)
            .then((response) => {
                setAPIData(response.data);
            })
    }, [])

Stiamo usando axios.get per inviare la richiesta GET all'API. Successivamente, se la richiesta è soddisfatta, imposteremo i dati di risposta nello stato APIData.

Ora popoliamo le righe della tabella in base al contenuto di APIData.

Per fare questo useremo la funzione map. Eseguirà un'iterazione sui dati dell'array e i dati verranno visualizzati.

<Table.Body>
  {APIData.map((data) => {
     return (
       <Table.Row>
          <Table.Cell>{data.firstName}</Table.Cell>
           <Table.Cell>{data.lastName}</Table.Cell>
           <Table.Cell>{data.checkbox ? 'Checked' : 'Unchecked'}</Table.Cell>
        </Table.Row>
   )})}
</Table.Body>

Stiamo mappando nome (firstName), cognome (lastName), e casella di spunta (checkbox) in base ai dati nell'API, tuttavia la casella di spunta è un po' diversa. Qui ho usato l'operatore ternario ('?'). Se data.checkbox è true, verrà visualizzato 'Checked` (spuntato), altrimenti 'Unchecked' (non spuntato).

L'Operazione di Aggiornamento

Crea un'ulteriore intestazione per l'aggiornamento e una colonna nella riga della tabella che conterrà un bottone per l'aggiornamento. Usa il bottone da Semantic UI React.

<Table.HeaderCell>Update</Table.HeaderCell>

<Table.Cell> 
  <Button>Update</Button>
</Table.Cell>

Quando facciamo click su questo pulsante dovremmo essere reindirizzati verso la pagina di aggiornamento. A questo scopo, ci occorre il componente Link da React Router.

Importa Link da React Router, quindi racchiudi il codice per la cella di tabella per il bottone di aggiornamento all'interno di Link.

import { Link } from 'react-router-dom';

<Link to='/update'>
  <Table.Cell> 
     <Button>Update</Button>
   </Table.Cell>
</Link>

Ora se facciamo click sul bottone di aggiornamento Update saremo reindirizzati alla pagina di aggiornamento.

Per poter aggiornare i dati della riga ci serviranno i rispettivi ID, ricevuti dall'API.

Crea una funzione chiamata setData e collegala al bottone Update.

 <Button onClick={() => setData()}>Update</Button>

Ora dovremo passare i dati come parametro per la funzione di cui sopra.

 <Button onClick={() => setData(data)}>Update</Button>

All'interno della funzione stampiamo questi dati sulle console:

const setData = (data) => {
   console.log(data);
}

Fai click sul bottone Update nella tabella e controlla la console. Dovresti vedere i dati dei rispettivi campi della tabella.

Ora conserviamo questi dati in localStorage.

const setData = (data) => {
        let { id, firstName, lastName, checkbox } = data;
        localStorage.setItem('ID', id);
        localStorage.setItem('First Name', firstName);
        localStorage.setItem('Last Name', lastName);
        localStorage.setItem('Checkbox Value', checkbox)
}

Stiamo destrutturando i dati in id, firstName, lastName e checkbox, quindi li inseriamo nel localStorage. Puoi usare localStorage per conservare localmente dati nel browser.

Ora, nel componente Update, ci serve un form per l'operazione di aggiornamento. Riutilizziamo il form dal componente Create. Cambiamo semplicemente il nome della funzione da Create a Update.

import React, { useState } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'
import axios from 'axios';

export default function Update() {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);

    return (
        <div>
            <Form className="create-form">
                <Form.Field>
                    <label>First Name</label>
                    <input placeholder='First Name' onChange={(e) => setFirstName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input placeholder='Last Name' onChange={(e) => setLastName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <Checkbox label='I agree to the Terms and Conditions' onChange={(e) => setCheckbox(!checkbox)}/>
                </Form.Field>
                <Button type='submit'>Update</Button>
            </Form>
        </div>
    )
}

Crea un hook useEffect nel componente Update. Lo useremo per ottenere i dati precedentemente conservati in localStorage. Inoltre, crea un ulteriore stato per il campo ID.

const [id, setID] = useState(null);

useEffect(() => {
        setID(localStorage.getItem('ID'))
        setFirstName(localStorage.getItem('First Name'));
        setLastName(localStorage.getItem('Last Name'));
        setCheckbox(localStorage.getItem('Checkbox Value'))
}, []);

Imposta i rispettivi dati in base alle tue chiavi da localStorage. Dobbiamo impostare questi valori nei campi del form. Quando la pagina di aggiornamento Update si caricherà i campi verranno automaticamente popolati.

<Form className="create-form">
                <Form.Field>
                    <label>First Name</label>
                    <input placeholder='First Name' value={firstName} onChange={(e) => setFirstName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input placeholder='Last Name' value={lastName} onChange={(e) => setLastName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <Checkbox label='I agree to the Terms and Conditions' checked={checkbox} onChange={(e) => setCheckbox(!checkbox)}/>
                </Form.Field>
                <Button type='submit'>Update</Button>
            </Form>

Ora, se facciamo click sul bottone Update nella pagina di lettura Read, saremo reindirizzati alla pagina di aggiornamento, dove vedremo tutti i dati del form popolati automaticamente.

Ora creiamo una richiesta di aggiornamento per i dati.

Crea una funzione chiamata  updateAPIData. All'interno di questa funzione andremo a usare axios.put per inviare una richiesta PUT che aggiornerà i nostri dati.

const updateAPIData = () => {
    axios.put(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`, {
        firstName,
         lastName,
         checkbox
	})
}

Qui puoi vedere che stiamo accodando un campo id all'endpoint dell'API.

Quando facciamo click sul bottone Update nella tabella, l'ID che rappresenta il relativo record viene conservato in localStorage. Nella pagina di aggiornamento lo recuperiamo. Successivamente conserviamo quell'ID nello stato id.

Dopodiché passiamo l'id all'endpoint. Questo ci consente di aggiornare il record di cui stiamo passando l'ID.

Collega la funzione updateAPIData al bottone Update.

<Button type='submit' onClick={updateAPIData}>Update</Button>

Clicca sul bottone Update nella tabella nella pagina di lettura Read, modifica il cognome, quindi fai click sul bottone Update nella pagina di aggiornamento Update.

Ritorna alla pagina di lettura Read oppure controlla l'API. Dovresti vedere che il cognome è stato modificato.

L'Operazione di Eliminazione

Aggiungi un altro pulsante alla tabella in read.js, che useremo per l'operazione di eliminazione.

<Table.Cell>
   <Button onClick={() => onDelete(data.id)}>Delete</Button>
</Table.Cell>

Crea una funzione chiamata onDelete e collegala al bottone Delete. Questa funzione riceverà un ID come parametro quando si fa click sul pulsante Delete.

const onDelete = (id) => {

}

Useremo axios.delete per eliminare le rispettive righe.

const onDelete = (id) => {
  axios.delete(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`)
}

Fai click sul bottone Delete e controlla l'API. Dovresti vedere che il record è stato eliminato.

Dopo l'eliminazione dobbiamo ricaricare i dati della tabella.

Quindi crea una funzione per caricare i dati dall'API.

const getData = () => {
    axios.get(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`)
        .then((getData) => {
             setAPIData(getData.data);
         })
}

Ora, nella funzione onDelete, dobbiamo caricare i dati aggiornati dopo avere eliminato un record.

const onDelete = (id) => {
        axios.delete(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`)
     .then(() => {
        getData();
    })
}

Ora se se facciamo click su Delete in qualsiasi riga della tabella, verrà eliminato il record rappresentato e la tabella si aggiornerà automaticamente.

Facciamo Qualche Miglioramento alla nostra App CRUD

Quando inviamo i dati nella pagina Create, stiamo semplicemente inserendo gli elementi nel database di dati fittizi. Dobbiamo reindirizzarci verso la pagina di lettura Read dopo che il nuovo record è stato creato nella pagina Create.

Importa useHistory da React Router.

import { useHistory } from 'react-router';

Crea una variabile chiamata history e associala alla funzione useHistory.

let history = useHistory();

Quindi usa la funzione history.push per la redirezione verso la pagina di lettura Read appena dopo la chiamata post fatta all'API.

const postData = () => {
        axios.post(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`, {
            firstName,
            lastName,
            checkbox
        }).then(() => {
            history.push('/read')
        })
    }

Usando l'hook useHistory l'app verrà diretta verso la pagina di lettura Read.

Fai la stessa cosa per la pagina di aggiornamento Update.

import React, { useState, useEffect } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'
import axios from 'axios';
import { useHistory } from 'react-router';

export default function Update() {
    let history = useHistory();
    const [id, setID] = useState(null);
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);

    useEffect(() => {
        setID(localStorage.getItem('ID'))
        setFirstName(localStorage.getItem('First Name'));
        setLastName(localStorage.getItem('Last Name'));
        setCheckbox(localStorage.getItem('Checkbox Value'));
    }, []);

    const updateAPIData = () => {
        axios.put(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`, {
            firstName,
            lastName,
            checkbox
        }).then(() => {
            history.push('/read')
        })
    }
    return (
        <div>
            <Form className="create-form">
                <Form.Field>
                    <label>First Name</label>
                    <input placeholder='First Name' value={firstName} onChange={(e) => setFirstName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input placeholder='Last Name' value={lastName} onChange={(e) => setLastName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <Checkbox label='I agree to the Terms and Conditions' checked={checkbox} onChange={() => setCheckbox(!checkbox)}/>
                </Form.Field>
                <Button type='submit' onClick={updateAPIData}>Update</Button>
            </Form>
        </div>
    )
}

Adesso sai come fare per eseguire operazioni di creazione, lettura, aggiornamento e cancellazione (CRUD) usando React e gli hook di React!

Puoi trovare il codice su GitHub se vuoi sperimentare ulteriormente.

Buon apprendimento.