1

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

introducir la descripción de la imagen aquí

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;
3
  • Podrias publicar lo que has intentado, asi tener algo de donde partir, por favor lee Como elaborar una buena pregunta
    – Jamt0
    Commented el 30 abr. 2021 a las 2:39
  • 1
    listo ya añadi mi codigo disculpa.
    – snakeshin
    Commented el 30 abr. 2021 a las 2:55
  • Cuando te refieres que las tareas completadas queden deshabilitadas es que no se se puedan editar? o tambien quieres que no se muestren?
    – Jamt0
    Commented el 30 abr. 2021 a las 3:35

1 respuesta 1

0

Asumi que lo que quieres es que cuando se checkee la tarea la esconda y no se pueda editar, hice ciertos cambios por comodidad. Tu lista que era un array la trate como un objeto, por el tema de poder manipular mas facilmente por medio del id, pero funcionaria de modo simular si fuera un array. Si le agregas los estilos tuyos quedaria como deseas, hice un CodeSandbox, cualquier duda o cambio que no puedas realizar me avisas.

La forma de solucionar el problema que tenias era añadir a cada elemento de la lista una propiedad completada, que es un boolean, con esto haces que el estado se entere cuando una tarea se completo, por lo que si quieres seguir con un arreglo, tendrias un arreglo de objetos similar a esto:

[
  {id: 1, tarea: puntuar respuesta positivamente, completada: false},
  {id: 2, tarea: programar, completada: true},
]

la forma en que lo hice en el codigo, un objeto de objetos:

{
  1: {tarea: puntuar respuesta positivamente, completada: false},
  2: {tarea: programar, completada: true},
}

despues ya es tan simple como añadir otro estado que controle el boton de mostrar tareas completadas en app, y en el componente tareas dependiendo de si tarea.completada es true o false permitir editar. OJO Tu codigo se basaba en el index del map para asignar los id a las tareas, esta no es buena idea, mi solucion, aunque no la mejor fue crear un estado que sea un contador.

El app:

import React, { useState, Fragment } from "react";
import TareaForm from "./layouts/TareaForm";
import Tarea from "./layouts/Tarea";

function App() {
  const [tareas, setTareas] = useState({});
  const [contadorTareas, setContadorTareas] = useState(0);
  const [mostrarCompletadas, setMostrarCompletadas] = useState(false);

  //Añadir Tarea
  const crearTarea = (tarea) => {
    let nuevasTareas = JSON.parse(JSON.stringify(tareas));
    nuevasTareas[contadorTareas] = { tarea: tarea.tarea, completada: false };
    setContadorTareas(contadorTareas + 1);
    setTareas(nuevasTareas);
  };

  //Borrar Tarea
  const borrarTarea = (id) => {
    let nuevasTareas = JSON.parse(JSON.stringify(tareas));
    delete nuevasTareas[id];
    setTareas(nuevasTareas);
  };

  /* Actualizar cambios editar */
  const editarTarea = (id, tarea) => {
    let nuevasTareas = JSON.parse(JSON.stringify(tareas));
    nuevasTareas[id] = tarea;
    setTareas(nuevasTareas);
  };

  const completarTarea = (id) => {
    let nuevasTareas = JSON.parse(JSON.stringify(tareas));
    nuevasTareas[id].completada = !tareas[id].completada;
    setTareas(nuevasTareas);
  };

  const mostrarTareasCompletadas = () =>
    setMostrarCompletadas(!mostrarCompletadas);

  return (
    <div className="App">
      <TareaForm crearTarea={crearTarea} />
      <div className="lista-tareas">
        {Object.keys(tareas).map((id) =>
          !tareas[id].completada ? (
            <Tarea
              key={id}
              tarea={tareas[id]}
              borrarTarea={borrarTarea}
              completarTarea={completarTarea}
              editarTarea={editarTarea}
              id={id}
            />
          ) : (
            <Fragment key={id} />
          )
        )}
      </div>
      <button onClick={mostrarTareasCompletadas}>
        {mostrarCompletadas ? "Ocultar" : "Mostrar"} Tareas completadas
      </button>
      {mostrarCompletadas &&
        Object.keys(tareas).map((id) =>
          tareas[id].completada ? (
            <Tarea
              key={id}
              tarea={tareas[id]}
              borrarTarea={borrarTarea}
              completarTarea={completarTarea}
              editarTarea={editarTarea}
              id={id}
            />
          ) : (
            <Fragment key={id} />
          )
        )}
    </div>
  );
}

export default App;

El componente Tarea:

import React, { useState } from "react";

const Tarea = (props) => {
  const [modoEdit, setModoEdit] = useState(false);
  const [editText, setEditText] = useState(props.tarea.tarea);

  const submitEdit = (e) => {
    e.preventDefault();
    props.editarTarea(props.id, {
      tarea: editText,
      completada: props.tarea.completada
    });
    setModoEdit(false);
  };

  const completar = () => props.completarTarea(props.id);

  const borrar = () => props.borrarTarea(props.id);

  const edit = () => setModoEdit(true);

  return (
    <div>
      {!modoEdit ? (
        <div className="tarea">
          <span>
            <input
              onChange={completar}
              checked={props.tarea.completada}
              type="checkbox"
              className="checkbox"
            ></input>
            {props.tarea.tarea}
          </span>
          {!props.tarea.completada && (
            <span onClick={edit}>
              <button>Editar</button>
            </span>
          )}
          <span onClick={borrar}>
            <button>Borrar</button>
          </span>
        </div>
      ) : (
        <form className="editar-formulario" onSubmit={submitEdit}>
          <input
            value={editText}
            onChange={(e) => setEditText(e.target.value)}
          ></input>
          <button>Guardar</button>
        </form>
      )}
    </div>
  );
};

export default Tarea;

El componente TareaForm:

import React, { useState } from "react";

const TareaForm = (props) => {
  const [inputText, setInputText] = useState("");
  const [validacion, setValidacion] = useState(true);

  const actualizarFormulario = (e) => {
    setInputText(e.target.value);
  };

  const enviar = (e) => {
    e.preventDefault();
    if (inputText.trim() === "") {
      setValidacion(false);
    } else {
      props.crearTarea({ tarea: inputText, completada: false });
      setInputText("");
      setValidacion(true);
    }
  };

  return (
    <div className="contenedor">
      <h1>Lista de Tareas</h1>
      <form className="formulario" onSubmit={enviar}>
        <input
          placeholder="Nueva tarea"
          value={inputText}
          onChange={actualizarFormulario}
        />
        <button>Agregar</button>
      </form>
      {!validacion && <div className="error">Agrega una tarea</div>}
    </div>
  );
};

export default TareaForm;
2
  • muchas gracias te lo agradezco
    – snakeshin
    Commented el 1 may. 2021 a las 20:59
  • Si esto resuleve tu problema, te agradeceria que la marques como solución, asi cerrar la pregunta, si no soluciona tu problema, dime como te puedo ayudar.
    – Jamt0
    Commented el 1 may. 2021 a las 21:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.