CODEWITHSUNDEEP
reactjs
Logesh P
Logesh P

Reputation: 227

List Items are not rendering in Child Component ReactJS

I am trying to list the array on the child component modal from parent Like, whenever a user click on particular row, modal will pop up and display the user details

When i pass the props to child and print the console.log, it display fine in console.log but list is not rendering in Modal

Here is my Code

export default function TransitionsModal({ open, setOpen, editItem }) {
  const classes = useStyles();
  console.log("Children Items", editItem); //this line prints details of particular user
  const handleClose = () => {
    setOpen(!open);
  };

  return (
    <div>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        className={classes.modal}
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500
        }}
      >
        <Fade in={open}>
          <div className={classes.paper}>
            <h2 id="transition-modal-title">User Details</h2>
            <p id="transition-modal-description">

              //THIS PART IS NOT RENDERING

              {editItem &&
                editItem.length &&
                editItem.map(items => {
                  return <p key={items.id}>{items.name}</p>;
                })}
            </p>
          </div>
        </Fade>
      </Modal>
    </div>
  );
}

Output Attached

Upvotes: 0

Views: 97

Answers (1)

Maniraj Murugan
Maniraj Murugan

Reputation: 9084

As per your output, the data you receive is an object not an array.. So this block of code,

{editItem &&
   editItem.length &&
   editItem.map(items => {
   return <p key={items.id}>{items.name}</p>;
})}

Won't work.. It works only the data you receive is an array.

So already you receive the right data in editItem, So you can directly return the user details such as name like,

{ return (<p>{editItem.name}</p>) }

Upvotes: 2

Related Questions