component not rendering after setState in React.js

Question

I'm trying to render a component conditionally based on a particular state. The code below is inside of a mapping on another file. I have a setState const of open and whenever a user clicks the 'comment' button it should be setting the openState to true. However, when I click the comment button it does not open the modal. The modal is passed a prop of open={open} and i'm still not getting it to open.

here is the code

  const { blog, idx, id } = props


  const [open, setOpen] = useState({});
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);


  return (
    <>
      <div className="blogBox" id={id} key={idx}>
        <h4>{blog.title}</h4>
        <hr />
        <p>{blog.body}</p>
        <hr />
        <p id="postedBy">Posted By: Claude @ {blog.createdAt}</p>
        <hr />
        <button className="btn btn-info" onClick={handleOpen}>Comment</button>
        <HandleNoteModal open={open} onClose={handleClose} />
        <hr />
        <div className="comment Section">
          <span>User 1:</span>
          <span> Comment one</span>
          <br />
          <span>User 2:</span>
          <span> Comment two</span>
        </div>
      </div>
    </>
  )

}

I'm wondering if i need to be passing the prop inside the other component as well as passing it in here on this file. my <HandleNoteModal /> component was created on another file and then imported.

for safe keeping and time, here is the code for my HandleNoteModal component.

  const { handleClose } = props
  const [noteState, setNoteState] = useState({
    user: '',
    note: ''
  });

  const handleInputChange = ({ target: { name, value } }) => {
    setNoteState({ ...noteState, [name]: value });
  };

  
  return (
    <div className="modal" tabIndex="-1">
      <div className="modal-dialog">
        <div className="modal-content">
          <div className="modal-header">
            <h5 className="modal-title">Leave a Comment</h5>
            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div className="modal-body">
            <form>
              <div className="mb-3">
                <label htmlFor="note" className="form-label">Comment:</label>
                <textarea name="note" className="form-control formBody" placeholder="Enter comment here" onChange={handleInputChange} required />
              </div>
              <button type="submit" className="btn btn-primary">Send</button>
            </form>
          </div>
          <div className="modal-footer">
            <button type="button" className="btn btn-secondary" data-bs-dismiss="modal" onClick={handleClose}>Close</button>
          </div>
        </div>
      </div>
    </div>

  )
} ```

The key thing to check HandleNoteModal is open prop, but seemingly you haven't shared it in HandleNoteModal code. Please show how you integrate open prop in that component — Nick Vu
– Nick Vu, Commented Mar 31, 2022 at 17:29
If i set the return statement inside a condition of if (open === true) within the HandleNoteModal component it still doesn't render — Claude M
– Claude M, Commented Mar 31, 2022 at 17:32

Nick Vu · Accepted Answer · 2022-03-31 17:36:40Z

0

I think for your case, you don't need to pass open prop to validate opening or closing that modal component

You just put a conditional check on your upper component like below

{open && <HandleNoteModal onClose={handleClose} />}

Here is how it looks like in your code

const { blog, idx, id } = props


  const [open, setOpen] = useState({});
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);


  return (
    <>
      <div className="blogBox" id={id} key={idx}>
        <h4>{blog.title}</h4>
        <hr />
        <p>{blog.body}</p>
        <hr />
        <p id="postedBy">Posted By: Claude @ {blog.createdAt}</p>
        <hr />
        <button className="btn btn-info" onClick={handleOpen}>Comment</button>
        {open && <HandleNoteModal onClose={handleClose} />}
        <hr />
        <div className="comment Section">
          <span>User 1:</span>
          <span> Comment one</span>
          <br />
          <span>User 2:</span>
          <span> Comment two</span>
        </div>
      </div>
    </>
  )

}

answered Mar 31, 2022 at 17:36

Nick Vu

15.6k5 gold badges29 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Claude M Over a year ago

unfortunately it is still not opening the modal.

Nick Vu Over a year ago

I created a sanbox here (codesandbox.io/s/keen-maxwell-iclzgw?file=/src/App.js) to simulate your case. Seemingly it's working with the simulation, could you tell me more about which error you get? @ClaudeM

Claude M Over a year ago

It isn't hitting me with any erreors it's just not triggering the modal render at all.

Claude M Over a year ago

this is however being rendered from within the map of another component and I think this may also be posing an issue for the code.

Nick Vu Over a year ago

could you share that map part with me? @ClaudeM

|

Collectives™ on Stack Overflow

component not rendering after setState in React.js

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related