Want to show data onMouseDown event in my REACT app - reactjs

Question

I have a console.log showing the correct information onMouseDown event in my REACT app, how do I change it so it shows the data in a pop up window?
I am happy to use Modal or hover over event, whatever it takes to display the data. Data Consists of:
on item click
{id: 3, group: 1, title: "resiting", bgColor: "#ff9800", start_time: Moment, …}
bgColor: "#ff9800"
end_time: Moment {_isAMomentObject: true, _i: "2018-10-11T15:08:00", _f: "YYYY-MM-DDTHH:mm:ss", _isUTC: false, _pf: {…}, …}
group: 1
id: 3
start_time: Moment {_isAMomentObject: true, _i: "2018-10-11T10:29:00", _f: "YYYY-MM-DDTHH:mm:ss", _isUTC: false, _pf: {…}, …}
title: "resiting"
__proto__: Object
import React, { Component } from "react";
import moment from "moment";
import Timeline from "react-calendar-timeline";
import generateFakeData from "../../generate-fake-data";
export default class App extends Component {
constructor(props) {
super(props);
const { groups, items } = generateFakeData();
const defaultTimeStart = moment()
.startOf("day")
.toDate();
const defaultTimeEnd = moment()
.startOf("day")
.add(1, "day")
.toDate();
this.state = {
groups,
items,
defaultTimeStart,
defaultTimeEnd
};
}
itemRenderer = ({
item,
timelineContext,
itemContext,
getItemProps,
getResizeProps
}) => {
const { left: leftResizeProps, right: rightResizeProps } = getResizeProps();
const backgroundColor = itemContext.selected
? itemContext.dragging
? "red"
: item.selectedBgColor
: item.bgColor;
return (
<div
{...getItemProps({
style: {
backgroundColor,
color: "#ffffff",
borderColor: "none",
borderStyle: "none",
borderWidth: 0,
borderRadius: 0,
borderLeftWidth: itemContext.selected ? 1 : 1,
borderRightWidth: itemContext.selected ? 1 : 1
},
onMouseDown: () => {
console.log("on item click", item);
}
})}
>
{itemContext.useResizeHandle ? <div {...leftResizeProps} /> : null}
<div
style={{
height: itemContext.dimensions.height,
overflow: "hidden",
paddingLeft: 3,
textOverflow: "ellipsis",
whiteSpace: "nowrap"
}}
>
{itemContext.title}
</div>
{itemContext.useResizeHandle ? <div {...rightResizeProps} /> : null}
</div>
);
};
render() {
const { groups, items, defaultTimeStart, defaultTimeEnd } = this.state;
return (
<Timeline
groups={groups}
items={items}
sidebarContent={<div>Vehicle</div>}
sidebarWidth={60}
lineHeight={20}
headerLabelGroupHeight={20}
fullUpdate={false}
itemsSorted
itemTouchSendsClick={false}
stackItems
itemHeightRatio={0.98}
showCursorLine
canMove={true}
canResize={true}
defaultTimeStart={defaultTimeStart}
defaultTimeEnd={defaultTimeEnd}
itemRenderer={this.itemRenderer}
/>
);
}
}
You can find it here on https://still-river-97856.herokuapp.com/tracking

Answer 1

Try something like this, you can use a ant design modal or a react-modal for the Modal(data={item}). But the logic is that once you click ok/away on the modal the clickedItem is set to null so that the modal is not displayed anymore.
Take a look at this code,
onMouseDown: () => {
console.log("on item click", item);
this.setState({clickedItem: item});
}
onModalOkClick = () => {
this.setState({clickedItem: null})
}
render() {
const { groups, items, defaultTimeStart, defaultTimeEnd, clickedItem } = this.state;
return (
<div>
<Timeline
groups={groups}
items={items}
sidebarContent={<div>Vehicle</div>}
sidebarWidth={60}
lineHeight={20}
headerLabelGroupHeight={20}
fullUpdate={false}
itemsSorted
itemTouchSendsClick={false}
stackItems
itemHeightRatio={0.98}
showCursorLine
canMove={true}
canResize={true}
defaultTimeStart={defaultTimeStart}
defaultTimeEnd={defaultTimeEnd}
itemRenderer={this.itemRenderer}
/>
{clickedItem ? <Modal data={clickedItem}> : null}
</div>
);
}
Let me know if you need help with the modal or you are still unsure how to proceed.
The dashboard looks nice btw. :)