Itemstodo
Itemstodo
/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/button-has-type */
import React, { useState, useEffect } from 'react';
import { FaTrash } from 'react-icons/fa';
import styles from './TodoItem.module.scss';
const completedStyle = {
fontStyle: 'italic',
color: '#595959',
opacity: 0.4,
textDecoration: 'line-through',
};
if (editing) {
viewMode.display = 'none';
} else {
editMode.display = 'none';
}
return (
<li className={styles.item}>
<div onDoubleClick={handleEditing} style={viewMode}>
<input
type="checkbox"
className={styles.checkbox}
checked={completed}
onChange={() => props.handleChangeProps(id)}
/>
<button onClick={() => props.deleteTodoProps(id)}>
<FaTrash style={{ color: 'orangered', fontSize: '16px' }} />
{' '}
</button>
<span style={completed ? completedStyle : null}>{title}</span>
</div>
<input
type="text"
style={editMode}
className={styles.textInput}
value={title}
onChange={(e) => {
props.setUpdate(e.target.value, id);
}}
onKeyDown={handleUpdatedDone}
/>
</li>
);
};