Adding a functional component to useeffect method in react js - reactjs

Question

I'm trying to adding a sample ModalPage functional component in the useEffect method, but it is showing an error:
const [data, setData] = React.useState('');
useEffect(() => {
const requestOptions = {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
};
fetch('http://localhost:4000/api/users/getUserDetails', requestOptions)
.then(response => response.json())
.then(res => {
const data = {
columns: [{
label: 'First Name',
field: 'FirstName',
sort: 'asc',
width: 150
},
{
label: 'Last Name',
field: 'LastName',
sort: 'asc',
width: 270
},
{
label: 'Email',
field: 'Email',
sort: 'asc',
width: 200
},
{
label: 'Phone Number',
field: 'PhoneNumber',
sort: 'asc',
width: 100
},
{
label: 'Edit',
field: 'Edit',
width: 100
},
],
rows: res.isUser.map((data) => ({
FirstName: data.firstName,
LastName: data.LastName,
Email: data.email,
PhoneNumber: data.phoneNumber,
edit : <ModalPage/>
}))
}
setData(data);
})
}, [])
this is the modal page
export default function ModalPage() {
const [show, setShow] = React.useState(false);
function toggle () {
setShow({
show: !show
});
}
return (
<MDBContainer>
<MDBBtn onClick={toggle}>Modal</MDBBtn>
<MDBModal isOpen={show} toggle={toggle}>
<MDBModalHeader toggle={toggle}>MDBModal title</MDBModalHeader>
<MDBModalBody>
(...)
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" onClick={toggle}>Close</MDBBtn>
<MDBBtn color="primary">Save changes</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}

Answer 1

As #Nisharg Shah said, you can't call <ModalPage/> inside of the useEffect hook. Try changing it to this:
rows: res.isUser.map((data) => ({
FirstName: data.firstName,
LastName: data.LastName,
Email: data.email,
PhoneNumber: data.phoneNumber,
Edit: ModalPage // Note the removal of the tags "</>"
}))
Then to render you can add this to your return statement:
<MDBModalBody>
{data.rows.map(row => <Edit/>)}
</MDBModalBody>