import React from 'react';
import {
makeStyles,
Typography,
InputLabel,
Grid,
Paper,
TableContainer,
Table,
TableHead,
TableRow,
TableBody,
TableCell,
TextField,
FormControl,
Select,
MenuItem,
Button,
Menu,
} from '@material-ui/core';
import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
import NestedMenuItem from 'material-ui-nested-menu-item';
const MainTable: React.FC = () => {
const classes = styles();
const [sentence, setSentence] = React.useState<any>([]);
const [menuPosition, setMenuPosition] = React.useState<any>(null);
const [emotionIntensity, setEmotionIntensity] = React.useState<any>([{}]);
const sentences = [
'1Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, nobis. Ab placeat provident aliquid sequi assumenda amet commodi. Ipsam cum ab totam sapiente delectus quam distinctio, ratione ducimus explicabo modi!',
'2Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, nobis. Ab placeat provident aliquid sequi assumenda amet commodi. Ipsam cum ab totam sapiente delectus quam distinctio, ratione ducimus explicabo modi!',
'3Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, nobis. Ab placeat provident aliquid sequi assumenda amet commodi. Ipsam cum ab totam sapiente delectus quam distinctio, ratione ducimus explicabo modi!',
'4Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, nobis. Ab placeat provident aliquid sequi assumenda amet commodi. Ipsam cum ab totam sapiente delectus quam distinctio, ratione ducimus explicabo modi!',
'5Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, nobis. Ab placeat provident aliquid sequi assumenda amet commodi. Ipsam cum ab totam sapiente delectus quam distinctio, ratione ducimus explicabo modi!',
];
const emotionArr = [
'Neutral',
'Pleasant',
'Relaxed',
'Elated',
'Surprise',
'Angry',
'Depressed',
'Fatigue',
'Unpleasant',
];
const intensityArr = ['Low', 'Medium', 'High'];
React.useEffect(() => {
setSentence(sentences);
// creating an array of sentence size
const updatedEmotionIntensityArr = [...emotionIntensity];
for (let i = 0; i < sentence.length; i++) {
updatedEmotionIntensityArr[i] = {};
}
setEmotionIntensity(updatedEmotionIntensityArr);
}, []);
const handleChangeSentence = (i: any) => (event: any) => {
// console.log('sentence is', event.target.value);
const updatedSentences = [...sentence];
const updatedSentence = event.target.value;
updatedSentences[i] = updatedSentence;
setSentence(updatedSentences);
};
const handleClick = (event: React.MouseEvent) => {
if (menuPosition) {
return;
}
event.preventDefault();
setMenuPosition({
top: event.pageY,
left: event.pageX,
});
};
const handleItemClick =
(emotion: any, intensity: any, sentenceIndex: any) =>
(event: React.MouseEvent) => {
setMenuPosition(null);
console.log('Index No is ', sentenceIndex);
const myNewArray = Object.assign([...emotionIntensity], {
[sentenceIndex]: {
emotion,
intensity,
},
});
console.log(myNewArray);
setEmotionIntensity(myNewArray);
};
return (
<Grid container alignItems='center' justify='center'>
<Paper className={classes.root}>
<TableContainer className={classes.container}>
<Table stickyHeader aria-label='sticky table'>
<TableHead>
<TableRow>
{columns.map((column) => (
<TableCell
key={column.id}
align={column.align}
style={{ minWidth: column.minWidth }}
>
{column.label}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{/* First Row, will make it dynamic */}
{sentence.map(
(sentenceString: any, sentenceIndex: any) => {
return (
<TableRow key={sentenceIndex}>
{/* sentence */}
<TableCell>
<Grid
container
direction='row'
justify='center'
alignItems='center'
>
<TextField
required
id='sentence'
name='sentence'
spellCheck='false'
classes={{
root: classes.textField,
}}
value={sentenceString}
multiline
inputProps={{
style: {
textAlign:
'left',
paddingTop:
'0.5rem',
paddingLeft:
'0.5rem',
fontFamily:
'Comfortaa',
minWidth:
'450px',
},
}}
onChange={handleChangeSentence(
sentenceIndex
)}
/>
<PlayCircleFilledIcon />
</Grid>
</TableCell>
{/* This Problem is in this cell */}
<TableCell>
{/* <NestedMenu /> */}
<Button
variant='outlined'
onClick={handleClick}
>
Emotions
</Button>
<Menu
open={!!menuPosition}
onClose={() =>
setMenuPosition(null)
}
anchorReference='anchorPosition'
anchorPosition={
menuPosition
}
>
{emotionArr.map(
(emotion) => {
return (
<NestedMenuItem
label={
emotion
}
parentMenuOpen={
!!menuPosition
}
key={
emotion
}
>
{intensityArr.map(
(
intensity
) => {
return (
<MenuItem
onClick={handleItemClick(
emotion,
intensity,
sentenceIndex // this index value does not change
)}
key={
intensity
}
>
{
intensity
}
</MenuItem>
);
}
)}
</NestedMenuItem>
);
}
)}
</Menu>
</TableCell>
</TableRow>
);
}
)}
</TableBody>
</Table>
</TableContainer>
</Paper>
</Grid>
);
};
export default MainTable;
The sentenceIndex that I'm passing in the handleItemClick is not changing. Rather than iterating as the number of elements in the sentences array, the key value does not change. I have used this index in another table row and it is working fine, the value is iterating but using it with NestedMenuItem and MenuItem, the key value does not change. I cannot find exactly what is causing the sentenceIndex to not iterate according to the elements present in the sentences array.