Tengo el siguiente componente funcional llamado RoomManagement. En el primer render, se llama a fetchRooms, que a su vez establece inicialmente las variables de estado con datos de una base de datos.

Tengo un componente secundario llamado RoomManagementModal, donde paso mi función setLoading y fetchRooms.

Tengo problemas para volver a renderizar el componente principal. Hago clic en un botón en el componente secundario (esto agrega algo a la base de datos). Entonces, estoy tratando de obtener los nuevos datos llamando a props.fetch() una vez más, pero esta vez desde el niño, lo que pensé que desencadenaría un cambio de estado en el padre, pero no parece de esa manera.

Parece que no puedo encontrar una manera de forzar que el componente principal se vuelva a renderizar, si eso es posible

 function RoomManagement() { const [rooms, setRooms] = useState([]); const [unavailableRooms, setUnavailableRooms] = useState(); const [loading, setLoading] = useState(true); const fetchRooms = async () => { await getAllRooms().then((res) => { res.json().then(data => setRooms(data)) }); await getAllRoomsUnavailable().then((res) => { res.json().then(data => setUnavailableRooms(data[0])) }) setLoading(false) } useEffect(() => { fetchRooms(); }, []); return (..... <RoomManagementModal setLoading={setLoading} fetch={fetchRooms}/> ) } export default RoomManagement;

 <Button onClick={() => { if (form.room_id && form.start && form.end) { createRoomUnavailable(form).then((res) => { if (res.status != 200 && res.status != 201) { res.text().then((e) => setError(e)); } else { props.fetch() } }); } else { setError("Missing required Room Id or date time."); } }} > Submit </Button>