[Error]createPortal의 element custom props

modal component를 구현하는데 에러가 생겼다.

해석해보면 React는 DOM의 custom props를 이해하지 못하니깐 lowercase로 적어라. 부모로부터 받은 props면 지워라?

구현 코드

//Modal.tsx
const Modal = () => {
	const modalContent = useRecoilValue(ModalContentState);
  	const isOpen = useRecoilValue(IsModalOpenState);

  	return ReactDOM.createPortal(
    	<style.Container>
      	<style.ModalBox isOpen={isOpen}>{modalContent}</style.ModalBox>
    	</style.Container>,
    	document.body
  	);
};

styled-components를 사용했는데 createPortal 안에 ModalBox에 넘겨준 isOpen 이게 문제가 되나보다.
그래서 props를 빼고 삼항 연산자로 처리해주니 해결되었다.

해결 후

//Modal.tsx
const Modal = () => {
  const modalContent = useRecoilValue(ModalContentState);
  const isOpen = useRecoilValue(IsModalOpenState);

  return isOpen
    ? ReactDOM.createPortal(
        <style.Container>
          <style.ModalBox>{modalContent}</style.ModalBox>
        </style.Container>,
        document.body
      )
    : null;
};