javascript - 我们如何使用 react js 将图标添加到侧边栏中的项目列表中？

Question

I am creating a music website using HTML,CSS and React JS.The below code is for the Sidebar. We have Home and Favorites items which is added to a list. I would want to know how can we add the icons to Home and Favourites. 

    
    const Sidebar = () => {
      const [sidebarState, setState] = useState({
        modal: false,
        toast: ''
      })
      
    
      const { state, dispatch } = useContext(StoreContext)
    
      const playlistRef = useRef(null)
      const playlists = Object.keys(state.playlists)
    
      const addPlaylist = e => {
        e.preventDefault()
        const list = playlistRef.current.value
    
        dispatch({ type: 'ADD_PLAYLIST', playlist: list })
    
        setState({
          ...sidebarState,
          modal: false,
          toast: 'Playlist was created successfully!'
        })
      }
    
      const handleModal = () =>
        setState({ ...sidebarState, modal: !sidebarState.modal })
    
      return (
        <ul className="Sidebar" css={CSS}>
          <img src={logo} />
          <li className="library">Library</li>
          
    
          {playlists.map(list => (
            <li
              key={list}
              className={list === state.currentPlaylist ? 'active' : ''} 
              onClick={() => dispatch({ type: 'SET_PLAYLIST', playlist: list })}
            >
             
          </li>
          ))}
      <li className="new-playlist" onClick={handleModal}>
       <i className="fa fa-plus-circle" /> 
        <span>New Playlist</span>
      </li>

      <Modal show={sidebarState.modal} close={handleModal}>
        <form onSubmit={addPlaylist}>
          <div className="title">New Playlist</div>

          <div className="content-wrap">
            <input
              type="text"
              placeholder="My Playlist"
              ref={playlistRef}
              required
            />

            <br />

            <button type="submit">Create</button>
          </div>
        </form>
      </Modal>

      <Toast
        toast={sidebarState.toast}
        close={() => setState({ ...sidebarState, toast: '' })}
      />
    </ul>
  )
}

在此处输入图像描述 我已经添加了输出的截图。我想知道我们如何在侧边栏中添加主页和收藏夹的图标。主页和收藏夹在列表中，我需要单独访问它们以指定图标。

{playlists.map(list => (

    <li
      key={list} 
      className={list=== state.currentPlaylist  ? 'active' : '' } 
     onClick={() => dispatch({ type: 'SET_PLAYLIST', playlist: list })}
    >
     
     {list}

  </li>
  ))}

这是我需要添加图标的代码部分。

标签： javascripthtmlcssreactjs