formタグの中のデータが反映されない問題(React)

formタグの中のデータが反映されない問題

インスタのような投稿ページをフォームで表そうとしたときに削除ボタンを押しても消えない。。。
だけど、コンソールだと消えてる問題に頭を抱えた。
問題のプログラムの例

const [tags,setTags]=([])//タグの変数
const deleteTag(e)=>{
	var tagNumber = Number(e.target.value);
	var arr =tags;
	var arr2=[];
	arr2=arr.splice(tagNumber,1)
	setTags(arr2);
}
<form>
	{tags.map((tag,index)=>(<>
		<p>{tag}</p>
		<button onClick={deleteTag}value={index}>×</button>
	</>))}
</form>

この場合だと配列のタグの場所の数値をdeleteTag関数に送って数値に変えてから消す仕組みになっているが、×ボタンを押してからタグの入力場所に何かキーを押さないと消えなくなってしまった。

改善したプログラム

const [tags,setTags]=([])//タグの変数
const deleteTag(e)=>{
	setTags(tags.filter((tag,index)=> tag !== e.target.value)))
}
<form>
	{tags.map((tag)=>(<>
		<p>{tag}</p>
		<button onClick={deleteTag}value={tag}>×</button>
	</>))}
</form>

直した所はsetTags内でfilter関数を使い配列内のタグ削除とOnClick時のvalueのindexからtagに変えたところです。

まとめ

spliceだとuseState配列との相性が悪かったので使わない。
useState内の配列を取り出すときはfilterを使うことでmap変数内でも問題なく削除の制御が出来る。