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.
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