Tengo 2 problemas.
1.- Necesito crear una función que cuando yo marque la casilla del checkbox este quede deshabilitado, esto es un proyecto de lista de tareas.
2.- También crear un botón de tareas completadas es al presionarla te muestre las tareas que ya tienes marcadas y deshabilitadas por medio del checkbox y al volverlo a presionar las oculte.
Lo demas ya lo implemente solo me quedaron esas 2 cosas que trato de buscar como realizarlo y no encuentro nada que pueda resolverlo
Este es el principal
import React, {useState} from 'react';
import TareaForm from './layouts/TareaForm';
import Tarea from './layouts/Tarea';
import './App.css';
function App() {
const [listaTareas, setListaTareas] = useState([]);
/* Añadir Tarea */
const nuevaTarea = (tarea) => {
setListaTareas([tarea, ...listaTareas]);
}
/* Borrar Tarea */
const borrar = (id) => {
const nuevaLista = listaTareas.filter((e, index) => index !== id);
setListaTareas(nuevaLista);
}
/* Actualizar cambios editar */
const editarTarea = (id, tarea) => {
const tareaActualizada = listaTareas.map((e, index) =>{
if(index === id){
e = tarea;
}
return e;
});
setListaTareas(tareaActualizada);
}
//console.log(listaTareas);
return (
<div className="App">
<TareaForm
nuevaTarea={nuevaTarea}
/>
<div className='lista-tareas'>
{
listaTareas.map((e, index) => <Tarea
tarea={e}
borrar={borrar}
id = {index}
editar={editarTarea}
/>
)
}
</div>
</div>
)
}
export default App;
este son los complementos
import React, {useState} from 'react';
import '../App.css';
const Tarea = (props) => {
const[modoEdit, setModoEdit] = useState(false);
const[editText, setEditText] = useState("");
const editar = () => {
setModoEdit(true);
}
const editCambio = (e) => {
setEditText(e.target.value);
}
const submitEdit = (e) => {
e.preventDefault();
props.tareaActualizada(props.id, editText);
setEditText("");
setModoEdit(false);
}
const borrarTarea = () => {
props.borrar(props.id);
}
return (
<div>
{
!modoEdit ?
<div className='tarea'>
<span><input type='checkbox' class='checkbox'></input>{props.tarea}</span>
<span onClick={editar}><button>Editar</button></span>
<span onClick={borrarTarea}><button>Borrar</button></span>
</div>
:
<form className='editar-formulario' onSubmit={submitEdit}>
<input value={editText} onChange={editCambio}></input>
<button>Guardar</button>
</form>
}
</div>
)
}
export default Tarea;
este es otro complemento.
import React, {useState} from 'react';
import '../App.css';
const TareaForm = (props) => {
const[inputText, setInputText] = useState("");
const[validacion, setValidacion] =useState("true");
const actualizarFormulario = (e) => {
setInputText(e.target.value);
//console.log(inputText);
}
const enviar = (e) => {
e.preventDefault();
if(inputText.trim() === ""){
setValidacion(false);
} else{
props.nuevaTarea(inputText);
setInputText("");
setValidacion(true);
}
}
return(
<div className='contenedor'>
<h1>Lista de Tareas</h1>
<form className="formulario" onSubmit={enviar}>
{/* <span>Añadir tarea: </span> */}
<input placeholder='Nueva tarea' value={inputText} onChange={actualizarFormulario} />
<button>Agregar</button>
{/* <button class='boton'>Mostrar completadas</button> */}
</form>
{
!validacion &&
<div className='error'>Agrega una tarea</div>
}
</div>
)
}
export default TareaForm;