reactjs - Cannot figure out how to click and drag to change colors in a react app

Question

Here is what the list of books looks like its contained in a div like so

<div>
    <listOfBooks/>
</div>

THE PROBLEM:

I am trying to create a functionality in this react app that will allow you to drag and select multiple books. Changing them from this green color to a red color. Basically like drawing a line from where you start to where you end and anything that the line is over should be marked red.

THINGS I'VE TRIED:

I have tried to use the document.onMouseUp() document.onMouseDown() and document.onMouseOver() inside of a useEffect() inside of the bookicofunc component located below

Tried to useContext hook matched with provider. It logs the correct things in the console but doesn't change the color as I drag only when I select.

CODE:

BookIcoFunc.jsx

import React, {useState, useRef, useEffect, useContext} from 'react'
import { FaBook } from 'react-icons/fa'
import BookIcoContext from '../../context/BookIconContext';






export default function BookIconFunc(props) {


    const [selected, setSelected] = useState(props.checkedOut)
    var color = selected ? 'red' : 'green'
  



    const gotClicked = useContext(BookIcoContext)

    /* 
    
        if selected = false that means it is available
        when clicked it should turn red
    
    */

    const indBook = {
        margin: "0.5rem",
        color: color
    }


    useEffect(() => {
        if(gotClicked === true){
            setSelected(!selected)
            // color = selected ? 'red' : 'green'
        }
    }, [selected])

    




    return <div>
        <FaBook 
        className={props.className} 
        style={indBook} size={32} 
        onMouseOver={() => {
            console.log(gotClicked);
            // if(gotClicked === true){
            //     setSelected(!selected)
            //     color = !selected ? 'red' : 'green'
            // }
        }}
        onMouseDown={() => {
            setSelected(!selected) 
        }}
        onMouseUp={() => {
            
        }}
        
        
      

    >
        

    </FaBook>
    </div>
    





}

BooksUpdate.jsx

import BookIconFunc from '../components/helperComponents/bookIconFunc'
import BookIcoContext from '../context/BookIconContext';

export default function BooksUpdate(props) {
 /* BOOK ICON CONTEXT STATE */

 const [iconState, setIconState] = useState(false)

return <BookIcoContext.Provider value={{iconState, setIconState}}>
                    <div style={booksRows} onClick={() => setIconState(true)} onMouseUp={() => setIconState(false)}>
                        {
                            
                            copies ? copies.map((copy, index) => {
                                return <div 
                                key={index}  


                                
                                >
                        
                        
                                    <BookIconFunc 
                                        className={classNameChanged} 
                                        checkedOut={copy.checkedOut}
                                        ref={bookicoref[index]} 
                                    >



                                    </BookIconFunc>
                            
                            
                                    
                                </div>
                            }) 
                        
                        : 
                        
                        
                            <div>none</div>
                        }
                    </div>
                </BookIcoContext.Provider>

bookicocontext.js

import { createContext } from 'react';


export default createContext(null);

Let me know if I should further explain or should provide more code!

question from:https://stackoverflow.com/questions/66056167/cannot-figure-out-how-to-click-and-drag-to-change-colors-in-a-react-app

Answer 1

Waitting for answers