I am using Modal Component in Chakra UI to show Input editor post (Input editor is a children component wrapped by Modal component). I want to trigger close modal from Input editor component if data was fetched as succeed.
Here's my component for Modal:
//...import component from Chakra Modal
import {Post as PostModal} from '../components/Modal'
export const Post = () => {
const { isOpen, onOpen, onClose } = useDisclosure()
return (
<div>
<Modal onClose={onClose} size='full' isOpen={isOpen} trapFocus={false} >
<ModalOverlay />
<ModalContent>
<ModalHeader>Add Post</ModalHeader>
<ModalCloseButton />
<ModalBody>
<div>
<PostModal />
</div>
</ModalBody>
</ModalContent>
</Modal>
</div>
)
}
And my code handle fetcher post data:
/components/Modal
const fetcher = async (data) => {
const _ = await sendPost(data);
if (_) {
//here i want to trigger close modal
}
}
const PostInput = () => {
return (
//<Input/>
//<Textarea> etc...
)
}
Who can help me please?
You can call the onClose function once the API call is successful , as:
const fetcher = async (data) => {
let res = await sendPost(data);
if (res.data) {
onClose()
}
}
Related
I'm trying to pass a function (addTask) as a prop from parent component (MainComponent.js) to Child Component (Button.js) but it's not working. I've also passed a variable (btnColor) as prop and it's working properly. What am I missing?
MainComponent.js:
import Button from "./Button";
const MainComponent = () => {
const addTask = () => {
console.log("Task Added...");
};
return (
<div>
<div> Header Component here </div>
<div> Some Data </div>
<Button onClick={addTask} btnColor="red" />
<div> Footer Component here </div>
</div>
);
};
export default MainComponent;
Button.js:
const Button = ({ addTask, btnColor }) => {
return (
<button style={{ backgroundColor: btnColor }} onClick={addTask}>
Add
</button>
);
};
export default Button;
I'm expecting the console to log 'Task Added...' but it isn't logging anything.
You're not passing it through correctly. You're passing it to onClick whereas you want to pass it through as addTask
Incorrect: <Button onClick={addTask} btnColor="red" />
Correct: <Button addTask={addTask} btnColor="red" />
I think it should be like this
const MainComponent = () => {
const addTask = () => {
console.log('Added new task...')
}
return (
<Button addTask={addTask} />
)
}
const Button = ({ addTask }) => {
return (
<button onClick={addTask} ></button>
)
}
I am trying to revalidate the data on react-modal close using SWR in a NextJS project.
I am using the SWR hook like so.
const { data, error, isValidating } = useSWR(
process.env.NEXT_PUBLIC_APP_URL + `/api/users`,
fetcher,{
revalidateIfStale: true,
revalidateOnFocus: true,
revalidateOnMount:true,
}
);
useEffect(() => {
if (data) {
setUsers(data.users);
}
}, [data, isValidating, users]);
//handle loading..
//handle error..
return (
<main className="mx-auto max-w-7xl ">
<Header title="All users"/>
<UsersList users={users} />
</main>
);
I am fetching a list of users and displaying them.
const usersList = users.((user) => (
<div className="space-x-5 text-sm" key={user.id}>
{user.name}
<DisableModal id={user.id} isDisabled={user.active}/>
</div>
));
I have a react modal that allows us to disable the users, once I have disabled the users with handle click.
When the modal closes the data is not being refetched.
This is a sample modal from the docs.
When I close the modal, and can see the list of users. They are not refreshed and not using revalidations with use SWR.
export const DisableModal = ({
id,
isDisabled,
}) => {
const [disableModalIsOpen, setDisableModalIsOpen] = useState(false);
function closeDisableModal() {
setDisableModalIsOpen(false);
}
function openPublishModal() {
setDisableModalIsOpen(true);
}
const handleDisableUser = async () => {
//disable logic in rest call.
closeDisableModal();
}
....
}
You can revalidate the data manually using mutate when the onAfterClose callback in the modal gets triggered.
export const DisableModal = () => {
const [showModal, setShowModal] = useState(false);
const { mutate } = useSWRConfig()
return (
<>
<button onClick={() => { setShowModal(true) }}>Trigger Modal</button>
<ReactModal
isOpen={showModal}
onAfterClose={() => {
mutate(process.env.NEXT_PUBLIC_APP_URL + '/api/users')
}}
contentLabel="Minimal Modal Example"
>
<button onClick={() => { setShowModal(false) }}>Close Modal</button>
</ReactModal>
</>
)
}
Calling mutate(process.env.NEXT_PUBLIC_APP_URL + '/api/users') will broadcast a revalidation message to SWR hook with that given key. Meaning the useSWR(process.env.NEXT_PUBLIC_APP_URL + '/api/users', fetcher, { ... }) hook will re-run and return the updated users data.
I have a parent componet like this, just to show the dialog
The Child Component ( Main to show dialog)
export const MedicalRecord = memo(function MedicalRecord() {
// const onPressViewAll = useCallback(() => {}, [])
const [show, setShow] = useState(false) ///to show dialog
function hanndleDialog() {
setShow(!show) set to show dialog
}
// useEffect(() => {
// if (show == true) {
// setShow(!show)
// }
// },[show])
return (
<SummaryViewContainer
count={5}
title={"dashboardScreen.medicalRecords.title"}
onPress={() => {
hanndleDialog()
}}
>
<View>
{show && (
<ProgressDialog
show={show} //pass t
callback={() => {
hanndleDialog()
}}
/>
)}
<RecordItem />
<RecordItem />
<RecordItem />
</View>
</SummaryViewContainer>
)
})
And parent componet to show this dialog
export default function DialogTesting(show: boolean, { callback }) {
const [showDialog, doShow] = useState(show) //show to present show in child
return (
<View>
{/* <Button
title="click"
onPress={() => {
setShow(true)
}}
>
<Text>Show dialog</Text>
</Button> */}
<Dialog
visible={showDialog}
title="Record New Progress"
style={DIALOG}
onClose={() => {
doShow(false)
callback()
}}
>
But i cant figure out how to open dialog again when close the dialog, it only open for once, i try React Hook : Send data from child to parent component but not work !
How can i show dialog and when i click close button, the children return orignal state so i can click it again, thank you guy so much
Here is a short video of this problem
https://recordit.co/0yOaiwCJvL
I am assuming that you want to find a way to show hide a component based on click. So this is the sandbox for the same.
In this solution, instead of using a derived state, the state is held in the parent's state and the child is mounted/unmounted based on that state.
The state can be updated by a method present in the parent and this method is passed to the child to be triggered on the "hide child" button. The same method is used to show the child component as well.
Below is the core code for the same,
import React from "react";
const Dialog = ({ hideMe }) => {
return (
<div>
<div>I am dialog</div>
<button onClick={hideMe}>Hide me</button>
</div>
);
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = { showDialog: false };
}
toggleDialog = () => {
this.setState((prevState) => {
return { showDialog: !prevState.showDialog };
});
};
render() {
return (
<div>
<div>I am parent.</div>
<button onClick={this.toggleDialog}>Toggle Dialog</button>
{this.state.showDialog ? <Dialog hideMe={this.toggleDialog} /> : null}
</div>
);
}
}
export default App;
I'm using this lib to create a modal
I have 3 components: Table, Modal and List
Table has Modal (a custom React Modal), and the body of Modal will be List.
Now the problem is, List has some functions which change the states of Table, so when I do something that can make Table's state change, Table and Modal will be re-rendered when Modal is re-rendered, it re-creates a new List which leads to lost all stuffs I'm doing with List.
Here is a simple version of my app. link
Now I don't want List to be re-created each time Modal is re-rendered. Is there any way to archive that? (I don't want to create a modal myself or use global state management in this case)
import { useEffect, useMemo, useState } from "react";
import ReactModal from "react-modal";
ReactModal.setAppElement("#root");
const List = ({ onClick }) => {
useEffect(() => {
console.log("List is mounted");
}, []);
return <button onClick={onClick}>Click me!</button>;
};
const Modal = ({ state, body, isOpen }) => {
useEffect(() => {
console.log("Modal is re-rendered");
});
return (
<div
id="react modal wrapper"
style={{
display: `${isOpen ? "block" : "none"}`
}}
>
<ReactModal isOpen={isOpen}>
<div>
state is {state}
<br />
{body}
</div>
</ReactModal>
</div>
);
};
const Table = ({ state, onClick, isOpen }) => {
useEffect(() => {
console.log("Table is re-rendered");
});
const memorizedList = useMemo(() => <List onClick={onClick} />, []);
return (
<div>
state: {state}
<Modal state={state} body={memorizedList} isOpen={isOpen} />
</div>
);
};
const App = () => {
const [state, setState] = useState(1);
const onClick = () => setState((v) => v + 1);
return (
<div>
<button onClick={onClick}>Change state</button>
<Table state={state} onClick={onClick} isOpen={state % 2 === 0} />
</div>
);
};
export default App;
I have a ReactJS app with 4 screens/components. Each screen can link to another one.
I want to use Modals to display content of each screen, this way I don't lose the state of the current screen.
For now I just set the Modal on my 1st component :
<Modal show={this.state.show}
ref={this.ModalGlobal}
onHide={() => this.setState({show: false})}
>
<Modal.Body>
{this.state.id &&
<MyComponentB id={this.state.id} />
}
</Modal.Body>
</Modal>
On my ComponentB, I want to open the same Modal with different ID.
I tried to use references, but I don't know what to do with that in my ComponentB ?
Like :
this.ModalGlobal.current.destroy
Do I have to use Redux or can it be done using contexts or other solution ?
Instead of having one modal close another one and open that one, would it be possible to instead have the modal update its own contents based on the ID? You could make a wrapper for the modal that will update the body of the modal depending on the current ID. Something like this:
const MyModal = ({id}) => {
const [modalPage, setModalPage] = useState(id);
const [modalIsOpen, setModalIsOpen] = useState(false);
useEffect(() => {
setModalPage(id)
}, [id]);
const openModal = async () => {
setModalIsOpen(true);
document.body.style.overflowY = "hidden";
}
const closeModal = () => {
setModalIsOpen(false);
document.body.style.overflowY = "";
}
const modalPages = {
'welcome': <WelcomeComponent setModalPage />,
'products': <ProductsComponent setModalPage />,
'contact': <ContactComponent setModalPage />
}
const content = modalPages[modalPage];
return (
<Modal
isOpen={modalIsOpen}
onRequestClose={closeModal}
className="react-modal"
overlayClassName="react-modal-overlay"
>
{content}
</Modal>
);
}