React List Kullanımı

Bu yazımızda react ile kullanıcı kayıt sayfasından bilgiler alacağız. Aldığımız bu bilgileri bir listeye ekelyip, liste için localstorage kullanacağız. Ek olarak listeden eleman silme kısımlarını göstereceğiz. Listeye eklenen elemanları da ekranda gösterimini sağlayacağız. Yazımızı parça parça hazırlayacağız.

Kullanıcıdan alacağımız bilgiler  ad, soyad ve otomatik olarak id ekleyeceğiz. Bu veri tipini json objesi olarak listeye ekleyeceğiz.

İlk olarak users listemizi tanımlayalım.

const [users, SetUsers] = useState(() => {

const tempUsers = localStorage.getItem(‘users’);
return tempUsers ? JSON.parse(tempUsers) : [];
});

const [userName, setUserName] = useState(“”);

//users listesine kayıt eklendiğinde state değişimi yapılır

useEffect(() => {

localStorage.setItem(‘users’, JSON.stringify(users))
}, [users]);

const onClickDelete = (index) => {

SetUsers(users.filter((u) => u.id !== index));
}

const onClickAdd = () => {

if (user.trim()) {

const temp = {
“id”:id, “userName”: userName, “surname”: surname
}

SetUsers([…users, temp]);
setUser(“”);
}
}

const onChangeUser = (id) => {

SetUsers(users.map((u) => u.id === id ? { …u, isAdd: !u.isAdd} : u));

}

sayfada listelemek için;

{users.length > 0 && (

<ul className=’list-group”‘>
{users.map((user) => (
<li key={user.id} className=’list-group-item ‘>
<div className=’row’>
<div className=’col-md-3 d-flex justify-content-between’>
<input
type=’checkbox’
checked={user.isAdd}
onChange={() => onChangeUser(user.id)}
/>
<p className={user.isAdd? “text-start” : ” text-end”}>

{user.user}
</p>
</div>
<div className=’col-md-3′>
<button className=’btn btn-danger’ onClick={() => onClickDelete(user.id)}>Sil</button>
</div>
</div>
</li>
))}
</ul>