Swapped out a library

client/pages/administration/panels/news-editor.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext, useRef } from 'react';
-import Select from 'react-dropdown-select';
+import Select from 'react-select';
 
 import { TokenContext } from '../../utilities/token-provider';
 
@@ -39,11 +39,9 @@ const NewsEditor = props => {
 		<div className='panel'>
 			<h2 className='text centered'>News Editor</h2>
 			<Select
-				options={articles.map(article => { return { label: article.title, value: article.index }; })}
+				options={articles.map(article => { return { label: article.title, index: article.index }; })}
-				onChange={async values => {
+				onChange={async ({index}) => {
 					//fetch this article
-					const index = values[0].value;
-
 					const result = await fetch(`${process.env.NEWS_URI}/news/archive/${index}`, {
 						headers: {
 							'Access-Control-Allow-Origin': '*'

package.json

@@ -43,10 +43,10 @@
     "raw-loader": "^4.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-dropdown-select": "^4.7.4",
     "react-markdown": "^6.0.2",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
+    "react-select": "^5.2.1",
     "rehype-raw": "^5.1.0",
     "sequelize": "^6.6.5",
     "socket.io-client": "^4.1.3",