Merge pull request #6 from NisanurBulut/rev_guidereactjs

Rev guidereactjs
NisanurBulut · Feb 9, 2021 · 32c3500 · 32c3500
2 parents 6231fb1 + 09ae664
commit 32c3500
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/Trailers/Trailer_GuideReactJs.gif b/Trailers/Trailer_GuideReactJs.gif
diff --git a/guideReactJs/src/components/AppHooks/SongList.js b/guideReactJs/src/components/AppHooks/SongList.js
@@ -5,9 +5,9 @@ import classes from '../../containers/AppHooks/AppHooks.css';
 const SongList = () => {
   const [songs, setSongs] = useState([
     // array detsructing
-    { title: 'Bambaşka Biri', id: 1 },
-    { title: 'Melek', id: 2 },
-    { title: 'Seni seviyorum', id: 3 },
+    { title: 'Şarkı 1', id: 1 },
+    { title: 'Şarkı 2', id: 2 },
+    { title: 'Şarkı 3', id: 3 },
   ]);
   const addSong = (title) => {
     setSongs([...songs, { title, id: uuidv4() }]);
@@ -20,7 +20,7 @@ const SongList = () => {
     <div className={classes.songList}>
       <ul>
         {songs.map((song) => {
-          return <li key={song.id}>{song.title}</li>;
+          return <li className={classes.liTag} key={song.id}>{song.title}</li>;
         })}
       </ul>
       <NewSongForm addSong = {addSong}/>

diff --git a/guideReactJs/src/containers/AppHooks/AppHooks.css b/guideReactJs/src/containers/AppHooks/AppHooks.css
@@ -1,14 +1,16 @@
 li {
   text-decoration: none;
   list-style: none;
-  background-color: #ddd;
   border-radius: 5px;
   margin-top: 5px;
 }
 
 .songList {
   padding-top: 5%;
 }
+.liTag{
+  background-color: #ddd;
+}
 
 .btnAge {
   background-color: thistle;