Aby dodać nowy widoczek proponuję kod:
App.jsx
const dodajWidoczek = ({ nazwa, plik, opis }) => {
setExtWidoczki(items => [
...items,
{
id: Date.now(), //proste i durne id (ilość milisekund od początku ery Unixa)
nazwa, //dodajWidoczek odbiera te 3 pola
plik, //obiekt który dostaje w probsie
opis,
likes: 0,
},
]);
};Trzeba oczywiście zaimportować nowy komponent i go użyć:
<Dodawanie onAdd={dodajWidoczek} />
components/Dodawanie.jsx
import { useState } from 'react';
export function Dodawanie({ onAdd }) {
const [nazwa, setNazwa] = useState('');
const [plik, setPlik] = useState('');
const [opis, setOpis] = useState('');
const klik = () => {
if (!nazwa || !plik || !opis) return; //czy są dane do dodania
onAdd({ nazwa, plik, opis });
setNazwa(''); // czyszczenie formularza
setPlik(''); // zadziała, bo inputy mają podane value={plik},
setOpis(''); // value={nazwa} itd.
};
return (
<div >
<h3>Dodaj widoczek</h3>
<input
placeholder="Nazwa"
value={nazwa}
onChange={e => setNazwa(e.target.value)} // tzw. kontrolowany komponent
/>
<input
placeholder="Link"
value={plik}
onChange={e => setPlik(e.target.value)} // kontrolowany komponent
/>
<input
placeholder="Opis"
value={opis}
onChange={e => setOpis(e.target.value)} // tzw. kontrolowany komponent
/>
<br />
<button onClick={klik}>Dodaj</button>
</div>
);
}
tuff quest