bbs機能

const [content, setContent] = useState("");
  const [submittedContents, setSubmittedContents] = useState([]);

  const handleInputChange = (e) => {
    setContent(e.target.value);
  };

  const handleSubmit = async () => {
    if (content.trim() !== "") {
      const { data, error } = await supabase.from("bbses").insert([{ content }]);
      if (!error) {
        setSubmittedContents([...submittedContents, content]);
        setContent("");
      }
    }
  };

<CardContent>
          <Input value={content} onChange={handleInputChange}></Input>
</CardContent>
<CardFooter>
          <Button type="submit" onClick={handleSubmit}>
            Submit
          </Button>
</CardFooter>
      </Card>
      <br />
      <div className="min-h-64 border-dotted border">
        <ul>
          {submittedContents.map((input, index) => (
            <li key={index}>{input}</li>
          ))}
        </ul>
      </div>
    </div>

• setSubmittedContents([...submittedContents, content]); は …submittedContents配列をコピーし、contentを付け加える

• supabaseとの連携部

const handleSubmit = async () => {
    if (content.trim() !== "") {
      const { data, error } = await supabase.from("bbses").insert([{ content }]);
      if (!error) {
        setSubmittedContents([...submittedContents, content]);
        setContent("");
      }
    }
  };

この形式は delete などでも同じ

リロード時に消えないように

useEffect(() => {
    async function fetchData() {
      const { data, error } = await supabase.from("bbses").select("content");
      if (data) {
        setSubmittedContents(
          data.map((submitContent) => submitContent.content)
        );
      }
    }
    fetchData();
  }, []);

削除機能

contentを識別できるようにidをつける

const handleSubmit = async () => {
    if (content.trim() !== "") {
      const { data, error } = await supabase
        .from("bbses")
        .insert([{ content }]);
      if (!error) {
        setSubmittedContents([
          ...submittedContents,
          { id: data[0].id, content },
        ]);
        setContent("");
      }
    }
  };

const handleDelete = async (id) => {
    const { data, error } = await supabase.from("bbses").delete().eq("id", id);
    if (!error) {
		setSubmittedContents(submittedContents.filter((content) => content.id !== id));    }
  };

• async(id) ⇒ このid は削除したいcontentのid
• filter((content) => content.id !== id ⇒ 右側のidが削除するid、それ以外で新しい配列をつくっている