2

necesito que mi componente hijo recargue el componente padre mediante un botón (que está en el componente hijo).

El funcionamiento es que al dar click en el botón de check se mueva de posición, por ejemplo que si presiono en una tarea pendiente se mueva la derecha a Tareas completadas. Para esto estoy usando local storage y cambiándole el valor de true o false, esto funciona correctamente, pero debo recargar la página para que se mueva de posición y necesito que se recargue el componente padre de "Tareas pendientes" y "Tareas completadas" para que haga la función filter nuevamente y sea de inmediato.

introducir la descripción de la imagen aquí

El código del componente padre de la tarea pendiente:

import React, {useState} from "react";
import Task from "./Task";

const TaskPend = (props) => {

  let id1 = JSON.parse(localStorage.getItem(1));
  let id2 = JSON.parse(localStorage.getItem(2));
  let id3 = JSON.parse(localStorage.getItem(3));
  let id4 = JSON.parse(localStorage.getItem(4));

  const result = [ id1, id2, id3, id4];

  const resultPend = result.filter((task) => task.check === false);

  return (
    <div className="">
      <h2 className="mb-4">Tareas pendientes</h2>
      {resultPend.map((element) => (
        <Task
          key={element.id}
          id={element.id}
          name={element.titulo}
          check={element.check}
          prioridad={element.prioridad}
        />
      ))}
    </div>
  );
};

export default TaskPend;

Componente padre de la tarea completada:

import React, { useState } from 'react';
import Task from "./Task";

const TaskComp = (props) => {
  const [show, setShow] = useState(false)

  let id1 = JSON.parse(localStorage.getItem(1));
  let id2 = JSON.parse(localStorage.getItem(2));
  let id3 = JSON.parse(localStorage.getItem(3));
  let id4 = JSON.parse(localStorage.getItem(4));

  const result = [ id1, id2, id3, id4];

  const resultComp = result.filter((task) => task.check === true);

  return (
    <div className="">
      <h2 className="mb-4">Tareas completadas</h2>
      {resultComp.map((element) => (
        <Task
          key={element.id}
          id={element.id}
          name={element.titulo}
          check={element.check}
          prioridad={element.prioridad}
        />
      ))}
    </div>
  );
};

export default TaskComp;

Este componente hijo es cada tarea y como decía al clickear en el botón (que dejaré comentado) me gustaría que recargue los componentes anteriores, como puedo realizar esto?

import React, { useEffect, useState } from "react";

const Task = (props) => {
  const [buttonCheck, setButtonCheck] = useState(props.check);
  const [urgencia, setUrgencia] = useState("bg-dark text-dark");
  const [txtUrgencia, setTxtUrgencia] = useState("Sin prioridad");
  const [posicion, setPosicion] = useState();
  const [errorPr, setErrorPr] = useState(null);

  /* Esta es la función que debería recargar los componentes */
  const click = () => {
    setButtonCheck(!buttonCheck);
    
    localStorage.setItem(props.id, JSON.stringify({
      id: props.id,
      titulo: props.name,
      check: !props.check,
      prioridad: props.prioridad
    }))
  };

  useEffect(() => {
    if (props.prioridad == 0) {
      setUrgencia("bg-danger");
      setTxtUrgencia("Urgente");
    } else if (props.prioridad == 1) {
      setUrgencia("bg-warning text-dark");
      setTxtUrgencia("Importante");
    } else if (props.prioridad == 2) {
      setUrgencia("bg-primary");
      setTxtUrgencia("No importante");
    } else {
      setErrorPr("No se puede identificar la prioridad");
    }
  }, [urgencia]);

  return (
    <div className="bd-highlight d-flex justify-content-left align-items-center p-3 mb-2">
      /* Este es el botón a realizar la acción */
      <button className="btn" onClick={() => click()} >
        <i
          className={
            buttonCheck
              ? "bi bi-check-circle-fill h3 mb-0 text-success"
              : "bi bi-check-circle h3 mb-0"
          }
        ></i>
      </button>
      <div className="ms-3">
        <p className="mb-1 text-start">{props.name}</p>
        <span className={`badge ${urgencia} float-start`}>{txtUrgencia}</span>
      </div>
    </div>
  );
};

export default Task;

Si es que deba ser más claro me dicen, gracias

1 respuesta 1

0

El componente puede necesitar re composición, de tal forma que el Parent sea Task y luego envolver a <TaskCompleted><TaskPending>. El objetivo es que el dueño del estado sea Task.


Actualización: re composición de Task

Puede haber otras aproximaciones, por ahora se me ocurre que se tenga todo el estado en un componente Task y luego separar por task type (completed, pending) con otro componente:

let initState = [
  {id:1,titulo:"Titulo 1",check:false,prioridad:1},
  {id:2,titulo:"Titulo 2",check:true,prioridad:0},
  {id:3,titulo:"Titulo 3",check:false,prioridad:2},
  {id:4,titulo:"Titulo 4",check:true,prioridad:1}
]

function Task(){
  const [taskList, setTaskList] = React.useState(initState);

  function statusUpdate(id){
    
    let stateCopy = taskList.map((item) => {
      if(id === item.id){
        item.check = !item.check;
        return item
      }
      return item;
    });
   
    setTaskList(stateCopy)
  }

  return (
    <div>
      <TaskType type="pending" taskList={taskList} handleCheck={statusUpdate} />
      <TaskType type="completed" taskList={taskList} handleCheck={statusUpdate}/>
    </div>
  )
}

function TaskType({type, taskList, handleCheck}){

  const items = taskList.map((item)=>{
    if(item.check === true && type === "completed") {
       return <p key={item.id}
       onClick={()=>handleCheck(item.id)}
       >{item.titulo}</p>
    } else if(item.check === false && type === "pending"){
       return <p key={item.id}
       onClick={()=>handleCheck(item.id)}>{item.titulo}</p>
    }
  });

  return (
    <div>
      <p>Task type {type}</p>
      {items}
    </div>
  )
}

ReactDOM.render(<Task/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>

<div id="root"></div>

Puedes tomar alguna idea de esta solución y adaptarla como más te convenga, en este caso lo que distingue al componente TaskType es la prop type y parece transformarse poco a poco, en un stateless component.

Nótese que hay algunos detalles que mejorar, por ejemplo la secuencia if-else-return con la que se obtienen los items dentro del componente TaskType. Eso ya lo puedes revisar de tu lado también.


Solución temporal (workaround)

Se puede usar una funcion setReload como props y ejecutar su set durante el evento click del botón, esto para ambos componentes(TaskComp y TaskPen, ver notas DRY mas adelante):

const [reLoad, setReload] = useState(false)

Se pasa setReload como props:

<Task
          key={element.id}
          id={element.id}
          name={element.titulo}
          check={element.check}
          prioridad={element.prioridad}
          setLoad={setReLoad}
        />

Luego, lo ejecutas en el onClick de Task:

/* Esta es la función que debería recargar los componentes */
  const click = () => {
    setButtonCheck(!buttonCheck);
    
    localStorage.setItem(props.id, JSON.stringify({
      id: props.id,
      titulo: props.name,
      check: !props.check,
      prioridad: props.prioridad
    }))
    //viene de props
    //va hasta el parent y dispara re-render
    setLoad(true)
  };

Esta propuesta viola el principio DRY, pero soluciona el problema; por esta razón se sugiere un cambio en el diseño de los componentes.

2
  • Pasa de que igual tenía un comportamiento extraño (solo hace desaparecer las tareas y no las muestra en el otro), entonces vi el tema de DRY que me dijiste y solo dejé un componente TaskColumn y no TaskComp con TaskPend (gracias a los props), hecho esto, cuál sería la solución ideal? Commented el 16 mar. 2022 a las 13:25
  • Pues hay varias aproximaciones a una solución, como te diste cuenta, tu diseño funcionaba bien solo era cuestión de encapsular el manejo del estado. Actualizé la respuesta, considera votar por la misma si te fue de ayuda, saludos
    – g.4
    Commented el 16 mar. 2022 a las 22:48

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.