공식문서를 읽어보고 간단한 게시판을 만들고 있습니다.
게시판에서 ‘저장하였습니다’ 같은 안내 창을 하나의 alert로 관리하고 싶어서
alert 컴포넌트를 만들어서 사용하려고 하는데 잘 안되서 글을 올리게 되었습니다.
글 작성 후 submit 시 제목이 있을 경우에만 리스트 포함 및 Alert_C 컴포넌트에
데이터를 보내는데 Alert_C에서는 아무것도 안찍히고 그렇다고 에러도 출력되지 않아
해결하는데 어려움이 있습니다. 해결하기 위해서는 어떤방식으로 접근해야할까요?
Board.js
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import AlertC from "./Alert_C";
export default function Board(props) {
let test;
return (
<>
<Form
onSubmit={(e) => {
e.preventDefault();
if (props.title !== "") {
test = <AlertC message="등록되었습니다" state={true} />;
props.listHandler({ title: props.title, content: props.content });
} else {
}
}}
>...
</Form>
{test}
</>
Alert_C.js
import Button from "react-bootstrap/Button";
import Alert from "react-bootstrap/Alert";
import { useState } from "react";
export default function AlertC(props) {
console.log(props);//미출력
const [show, setShow] = useState(false);
return (
<Alert show={show} variant="success">
<p>{props.message}</p>
<div className="d-flex justify-content-ed">
<Button variant="secondary" onClick={() => setShow(false)}>
닫기
</Button>
</div>
</Alert>
);
}