Inline Table editing with Edit and Delete Button Icon In React Js

import React, { useState } from "react"
import 'font-awesome/css/font-awesome.min.css';
import { faL } from "@fortawesome/free-solid-svg-icons";


const Addtourist = ({ userData = {}, postUser, updateTourist,showUpdateUser }) => {
const [user, setUser] = useState({
        id: userData.id ?? 0,
        tourist_name: userData.tourist_name ?? "",
        tourist_email: userData.tourist_email ?? "",
        tourist_location: userData.tourist_location ?? "",
    })

const handleValue = e => {
        setUser({ ...user, [e.target.name]: e.target.value })
    }

const submitUser = e => {
        e.preventDefault()
        debugger;
if (user.tourist_name === "" || user.tourist_email === "" || user.tourist_location === "") return

if (userData.id) {
            debugger;
            updateTourist(userData.id, user)
        } else {
            postUser(user)
        }
        setUser({ ...user, "tourist_name": "", "tourist_email": "", "tourist_location": "" })
    }
const hiderow = e => {
        showUpdateUser(userData.id);
    }
const isAdd = !userData.id ? true : false;
return (
        <>
            <td>
                <input
                    type='text'
                    name='tourist_name'
                    className="form-control"
                    value={user.tourist_name}
                    placeholder='Name'
                    onChange={e => handleValue(e)}
                />
            </td>
            <td>
                <input
                    type='email'
                    name='tourist_email'
                    className="form-control"
                    value={user.tourist_email}
                    placeholder='Email'
                    onChange={e => handleValue(e)}
                />
            </td>
            <td>
                <input
                    type='text'
                    name='tourist_location'
                    className="form-control"
                    value={user.tourist_location}
                    placeholder='location..'
                    onChange={e => handleValue(e)}
                />
            </td>
            <td>
                {isAdd ?
                    <input
                        className='btn btn-primary btnsubmit'
                        type='submit'
                        value={`${!userData.id ? "Add new user" : "Save user"}`}
                        onClick={submitUser}
                    /> :
                    <i className="fa fa-check fa-2x text-success" onClick={submitUser}></i>
                }
                {isAdd ? "" : <i className="fa fa-times fa-2x text-muted" onClick={hiderow}></i>}
            </td>
        </>
    )
}

export default Addtourist

The Addtourist component is defined as a functional component.It accepts props such as userData, postUser, updateTourist, and showUpdateUser. These props are used for managing tourist data and interactions.

The component utilizes the useState hook to manage local state. It initializes a state variable user which holds the tourist data. If userData is provided (for editing an existing tourist), it initializes the state with that data; otherwise, it initializes with empty strings.

handleValue function updates the state when input values change.

submitUser function handles form submission. It prevents the default form submission behavior, performs some validation to ensure all required fields are filled, and then either calls postUser to add a new tourist or updateTourist to update an existing tourist.hiderow function is called when the user clicks on the cancel icon. It invokes the showUpdateUser function.

The component renders a form with input fields for tourist name, email, and location.The input fields are controlled components, meaning their values are controlled by the component's state (user).

Conditional rendering is used to determine whether to show an "Add new user" button or a "Save user" button based on whether userData.id exists .If editing an existing tourist, a cancel icon is shown alongside the "Save user" button.

Addtourist component provides a form for adding or editing tourist information, with input fields for name, email, and location. It handles form submission and includes functionality for canceling edits.

Crudtourists.js

import React, { useState, useEffect } from "react"
import Form from "./Addtourist"
import Tablelist from "./Touristtable"
import 'bootstrap/dist/css/bootstrap.min.css';

import { restHelper } from "../httphelpers/restHelper"

const Crudtourists = () => {
const [tourists, settourists] = useState(null)

const url = "http://samplerestapi.com/api/Tourist"
const api = restHelper()

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

const postTourist = tourist => {
        api
            .postCreate(`${url}`, { body: tourist })
            .then(res => gettourists())
            .catch(err => console.log(err))
    }

const updateTourist = (id, tourist) => {
        api
            .putUpdate(`${url}/${id}`, { body: tourist })
            .then(res => gettourists())
            .catch(err => console.log(err))
    }

const deleteTourist = id => {
        api
            .deletedata(`${url}/${id}`, {})
            .then(res => gettourists())
            .catch(err => console.log(err))
    }

const gettourists = () => {
        api
            .get(`${url}`)
            .then(res => {
if(res && res.data)
                {
                    settourists(res.data)
                }
            })
            .catch(err => console.log(err))
    }
if (!tourists) return null

return (
        <>
            <h3>Add New Record</h3>
            <table>
                <tbody>
                    <tr>
                    <Form postUser={postTourist} />
                    </tr>
                </tbody>
            </table>
            
            <div className='container-fluid'>
                <h3>All Tourist</h3>
                <Tablelist
                    tourists={tourists}
                    settourists={settourists}
                    postTourist={postTourist}
                    updateTourist={updateTourist}
                    deleteTourist={deleteTourist}
                />
            </div>
        </>
    )
}

export default Crudtourists

Functions like postTourist, updateTourist, deleteTourist, and gettourists are defined to perform CRUD operations using an API. These functions make HTTP requests using restHelper to interact with the API endpoints.

Each CRUD operation updates the tourists state by fetching the latest data after the operation is completed.

Component user for managing tourist records, including fetching data, rendering a form for adding new records, and displaying a table of existing records with options for updating and deleting them. It encapsulates the CRUD functionality and separates concerns by using child components for form and table rendering.

App.js

import logo from './logo.svg';
import './App.css';
import CrudData from "./components/Crudtourists"
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
    <div className="container-fluid">
      <main>
                <CrudData />
            </main>
    </div>
  );
}

export default App;

I’m assuming that you are familiar with React Js framework and creating React Js applications. If not then please go through the following articles:

• What does props mean in react?
• Components in React Js?
• State in React Js