Adding a functional component to useeffect method in react js

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>
);
}

The problem is not related to `useEffect` the problem is related to `useState` because you can not use in `useEffect` — Nisharg Shah, Aug 15 '21 at 18:26
Yes, you can concat that rows in render function and it will work — Nisharg Shah, Aug 15 '21 at 18:36

Dylan Kerler · Answer 1 · 2021-08-16T10:56:01.247

0

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>

edited Aug 16 '21 at 10:56

answered Aug 15 '21 at 20:18

Dylan Kerler

2,007
1
8
23

how to define rows, Edit in modalPage component, because it is showing an error called `not defined` – Suman Aug 16 '21 at 04:28
I edited to make it clearer - it needs to be data.rows – Dylan Kerler Aug 16 '21 at 10:55
need to define `data` and `Edit/>` in modal component , it is throwing an error src\components\users\modalUser.js Line 19:14: 'data' is not defined Line 19:36: 'Edit' is not defined – Suman Aug 16 '21 at 11:31

Adding a functional component to useeffect method in react js

1 Answers1