iAuthor | The missing authoring tool

import {Col, Row, Container, Form, Button} from "react-bootstrap";
import React, {useState, useRef} from 'react';
import {Edit, Trash2, XCircle, Plus, X} from "react-feather";
import {IAuthor} from "../../assets/types/LibraryTypes";

type BookProps = {
    authors: IAuthor[]
}
const Book: React.FC = (Prop: any) => {
    const {authors} = Prop;
    var options = [];
    for (var i = 0; i < authors.length; i++) {
        options.push({authors[i].name});
    }
    const [books, setBooks] = useState([]);
    const [bookISBN, setBookISBN] = useState([]);
    const [bookAuthor, setBookAuthor] = useState([]);
    const [text, setText] = useState('');
    const [ISBN, setISBN] = useState('');
    const [author, setAuthor] = useState('testing authtp');
    const [index, setIndex] = useState(0);
    const [dispForm, setdispForm] = useState(false);
    const [bookName, setbookName] = useState(false);
    const [bookUpdate, setbookUpdate] = useState(false);
    const [bookState, setbookState] = useState('Create');
    const [validated, setValidated] = useState(false);
    const scrollDiv: React.MutableRefObject = useRef()

    const bookList = books.map((book: string, index: number) =>
        
            
                {index + 1}.{book}
            
            
                 (updateBook(book))}/>
                 deleteBooks(book)}/>
            
        )

    function listAllBooks() {
        if (books.length !== 0) {
            return bookList
        } else {
            return 
No Books listed here
        }
    }

    function createBooks(event:any) {
        const form = event.currentTarget;
        if (form.checkValidity() === false) {
            setbookName(true)
            event.preventDefault();
            event.stopPropagation();
            setValidated(true);
        }
        else{
            setbookName(false)
            if(!bookUpdate){
                let newStateBooks:string[] = [...books, text];
                let newStateISBN:string[] = [...bookISBN, ISBN];
                let newStateAuthor:string[] = [...bookAuthor, author];
                setBooks(newStateBooks)
                setBookISBN(newStateISBN)
                setBookAuthor(newStateAuthor)
                let t = ' '
                setText(t)
            }
            else{
                books.splice(index , 1, text)
                bookISBN.splice(index , 1, ISBN)
                bookAuthor.splice(index , 1, author)
            }
            let t = ''
            setText(t)
            setISBN(t)
            setAuthor(t)
            setbookUpdate(false)
            event.preventDefault();
            setValidated(false);
        }
    }

    function deleteBooks(name: string) {
        let newState = books.filter((el: string) => el !== name);
        setBooks(newState)

    }

    function checkFormvalidity(event:any) {
        const form = event.currentTarget;
        if (form.checkValidity() === false) {
            setbookName(true)
        }
        else{
            setbookName(false)
        }
    }

    function showForm(s :boolean) {
        setValidated(false);
        setbookName(false)

        let newState = s
        setdispForm(newState)
        scrollDiv.current.scrollIntoView({behavior: 'smooth'})
    }

    function updateBook(book: string) {
        setbookState('Update')
        let newState = book
        let index = books.indexOf(book)
        let bookISBNValue = bookISBN[index]
        let bookAuthorValue = bookAuthor[index]
        setIndex(index)
        setbookUpdate(true)
        showForm(true)
        setText(newState)
        setISBN(bookISBNValue)
        setAuthor(bookAuthorValue)
    }

    function addBook() {
        setbookState('Create')
        setbookUpdate(false)
        showForm(true)
        let t = ''
        setText(t)
        setISBN(t)
        setAuthor(t)
    }

    return (
        
            
                {listAllBooks()}
            

            
                 addBook()}> Add Book
            
            
                
                    
                        
                            {bookState} Book
                            
                    
                    
                         showForm(false)}/>
                    
                

                 checkFormvalidity(e)} onSubmit={(e) => createBooks(e)}>
                    
                        
                            
                                Title of the Book

                            
                            
                                
All fields are required
                            
                            

                                 setText(e.target.value)}
                                              required/>

                            
                            
                                ISBN
                            
                            
                                 setISBN(e.target.value)} required />
                            
                            
                                Author
                            
                            
                                 setAuthor(e.target.value)} required>
                                    Select an Author....
                                    {options}
                                
                                setAuthor('')}>
                                
                            
                        
                    
                    
                        
                            {bookState}
                        
                    
                
            
        
    )
}

export default Book;