const ChatWidget = () => {
const bodyRef = useRef(null)
const [{messages,roomMessages,roomID,socket,user}, dispatch] = useStateValue()
const [dropdown, setDropdown] = useState(false)
useEffect(()=>{
const setScreen = () =>{
bodyRef.current.scrollTop = bodyRef.current.scrollHeight
}
setScreen()
},[])
const updateMessages = (message) =>{
const allMessages = messages
allMessages.push(message)
dispatch({
type: "SET_MESSAGES",
item: allMessages
})
bodyRef.current.scrollTop = bodyRef.current.scrollHeight
}
useEffect(() => {
socket.on('new-message', (message) =>{
if(messages === null){
console.log('here it was null')
} else {
updateMessages(message)
}
})
// clean up socket on unmount
}, [])
const handleDropdown = (index) =>{
setDropdown(true)
console.log(index)
if(dropdown === true){
setDropdown(false)
}
}
return (
<div className={'chat'}>
<ChatHeader/>
<div ref={bodyRef} className={'chat__body'}>
{messages?.map((item,index)=>(
<Emojify key={item._id}>
<div
onMouseEnter={() => handleDropdown(index)}
onMouseLeave={handleDropdown}
className={`chat__message ${item.name === user.displayName && "chat__reciever"}`}>
<h5 className={'chat__messageUser'}>
{item.name}
</h5>
<p className={'chat__messagetext'}>
{item.message}
</p>
{dropdown && <Button><ArrowDropDownIcon/></Button>}
{item.img && <img alt={''} className={'chat__img'} src={item.imgURL}/>}
</div>
</Emojify>
))}
</div>
<div className={'chat__footer'}>
<ChatFooter/>
</div>
</div>
);
I am looking to display the Button component
{dropdown && <Button><ArrowDropDownIcon/></Button>}If you have any ideas or solutions, please let me know. Thank you!