Блог

Как выглядит код, отображающий кнопку для отображения формы

 import { useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux';  import { deleteSong, getSongs, updateSong } from '../../store/song';  import ReactAudioPlayer from 'react-audio-player'; import { useHistory } from 'react-router'; import SongForm from '../AddSongForm'; import EditSongForm from '../EditSongForm';   const SongList = () =gt; {   const [addShowForm, setAddShowForm] = useState(false);  const [editShowForm, setEditShowForm] = useState(false);   const history = useHistory()  const dispatch = useDispatch();   const songsObj = useSelector((state) =gt; state.songState.entries);  const songs = Object.values(songsObj)   const user = useSelector((state) =gt; state.session.user);  const CurrentUserId = user?.id   const remove = (e) =gt; {  dispatch(deleteSong(e.target.id));  }   const addFormCheck = (e) =gt; {  if (addShowForm) setAddShowForm(false)  if (!addShowForm) setAddShowForm(true)  }  const editFormCheck = (e) =gt; {  if (editShowForm) setEditShowForm(false)  if (!editShowForm) setEditShowForm(true)  }   useEffect(() =gt; {  dispatch(getSongs());  }, [dispatch]);    return (  lt;divgt;  lt;divgt;  lt;button onClick={addFormCheck}gt;add a songlt;/buttongt;  {addShowForm ?  lt;SongForm /gt;  : null}  lt;/divgt;  lt;h1gt;Song Listlt;/h1gt;  lt;olgt;  {songs.map(({ id, songName, songLink, userId }) =gt; (  lt;div className='songdetails' key={id}gt;  lt;p key={id}gt;songName={songName}lt;/pgt;  lt;ReactAudioPlayer  src={songLink}  autoPlay  controls  key={songLink}  /gt;  {userId === CurrentUserId ?  lt;gt;  lt;divgt;  lt;button id={id} onClick={remove}gt;removelt;/buttongt;  lt;/divgt;  lt;divgt;  lt;button id={id} onClick={editFormCheck}gt;editlt;/buttongt;  {editShowForm ?  lt;EditSongForm props={id} /gt;  : null}  lt;/divgt;  lt;/gt;  : null}  lt;/divgt;  ))}  lt;/olgt;  lt;/divgt;  ); }; export default SongList;  

Фактическая форма

 import { useState } from "react"; import { useDispatch } from "react-redux";  import { updateSong } from "../../store/song";  import { useSelector } from "react-redux";  const EditSongForm = ({ props }) =gt; {  console.log(props)  const dispatch = useDispatch();   const [songName, setSongName] = useState("");  const [songLink, setSongLink] = useState("");  const [errors, setErrors] = useState([]);    const reset = () =gt; {  setSongName("");  setSongLink("");  // setAlbumName('');  // setArtistName('')  };  const user = useSelector((state) =gt; state.session.user);  const userId = user?.id   const handleSubmit = async (e) =gt; {   e.preventDefault();  const updatedSongDetails = {  id: props,  songName,  songLink,  userId  };  let updatedSong = await dispatch(updateSong(updatedSongDetails))  .catch(async (res) =gt; {  const data = await res.json()  if (data amp;amp; data.errors) setErrors(data.errors)  })  reset();  };   return (  lt;div className="inputBox"gt;  lt;h1gt;Update A Songlt;/h1gt;  lt;ulgt;  {errors.map((error, idx) =gt; lt;li className='errors' key={idx}gt;{error}lt;/ligt;)}  lt;/ulgt;   lt;form onSubmit={handleSubmit}gt;  lt;input  type="text"  onChange={(e) =gt; setSongName(e.target.value)}  value={songName}  placeholder="Song Name"  name="Song Name"  /gt;  lt;input  type="text"  onChange={(e) =gt; setSongLink(e.target.value)}  value={songLink}  placeholder="Song Link"  name="Audio File"  /gt;  lt;button type="submit"gt;Submitlt;/buttongt;  lt;/formgt;  lt;/divgt;  ); };  export default EditSongForm;  

Прямо сейчас, когда у меня есть список песен и я нажимаю кнопку, чтобы появилась форма редактирования, она применяется ко всему списку, если у меня загружено более одной песни. Я не уверен, как сделать это достаточно конкретным, чтобы одновременно открывалась только одна форма.

Решение состояло в том, чтобы создать компонент для конкретных деталей песни, а затем отобразить его в файле .map.

 lt;h1gt;Song Listlt;/h1gt;  lt;olgt;  {songs.map(({ id, songName, songLink, userId }) =gt; (  lt;divgt;  lt;SpecificSong id={id} songName={songName} songLink={songLink} userId={userId} /gt;  lt;/divgt;  ))}  lt;/olgt;