title: How can i force a react component to refresh from a javascript file
body: <p>I'm trying to get a react component to display a list of items that have been retrieved from the backend using websockets. however as my websockets.js file is outside of the react hierarchy the list is never actually refreshed and therefore the items are not displayed.</p>
  
  <p>What i've tried so far is to add a public array of "projects" to the websocketservice.js file and then referencing this list inside my react component. it is however never refreshed even when the websocket returns with its collected values.</p>
  
  <p><strong>websocketservice.js</strong></p>
  
  <pre><code>class WebSocketService{
  
  projects = []
  
      static getInstance() {
          if(!WebSocketService.instance){
              WebSocketService.instance = new WebSocketService();
          }
          return WebSocketService.instance;
      }
  
      constructor() {
          this.socketRef = null;
      }
  
      connect() {
          const path = 'ws://127.0.0.1:8000/ws/wspingpong/';
          this.socketRef = new WebSocket(path);
          this.socketRef.onopen = () =&gt; {
              console.log('websocket opened');
              this.sendTestMessage();
          };
  
          this.socketRef.onmessage = e =&gt; {
              console.log("message recieved: " + e.data);
              this.messageRecieved(e.data)
          }
  
          this.socketRef.onerror = e =&gt; {
              console.log(e.onmessage);
          }
  
          this.socketRef.onclose = () =&gt; {
              console.log('websocket is closed');
              this.connect();
          }
      }
  
      sendMessage(data){
          try{
              this.socketRef.send(JSON.stringify(...data))
          }catch(err){
              console.log(err.message)
          }
      }
  
      messageRecieved(data) {
          const parsedData = JSON.parse(data);
          const command = parsedData.command;
          if(command === "STC-test"){
              console.log("succesfully recieved a testmessage from the server");
          }
          if(command === "STC-login"){
              console.log("succesfully logged in, redirecting...")
              console.log(parsedData.message)
              this.loggedUser = {
                  username: parsedData.message["username"],
                  email: parsedData.message["email"]
              }
              history.push("/project")
          }
          if(command === "STC-getprojects"){
              console.log(parsedData.message)
              this.projects = parsedData.message
          }
      }
  </code></pre>
  
  <p>above <code>console.log(parsedData.message)</code> correctly shows the list of projects</p>
  
  <pre><code>    getProjects(){
          console.log("getting projects....")
          if(this.loggedUser != null){
              var dict = [];
              dict.push({
                  command: "CTS-getprojects",
                  message: ""
              })
              this.sendMessage(dict)
          }else{
              console.log("no user logged in, unable to retrieve projects.")
          }
      }
  </code></pre>
  
  <p><strong>ProjectSelect.tsx</strong></p>
  
  <pre><code>export default class ProjectSelect extends React.Component&lt;Iprops&gt;{
  
      constructor(props: Iprops) {
          super(props)
      }
     render() {
          return (
              &lt;div&gt;
                  {
                      WebsocketInstance.loggedUser != null ?
                          &lt;div&gt;
                              &lt;h3&gt;ProjectSelect, welcome user: {WebsocketInstance.loggedUser.username}&lt;/h3&gt;
                              {WebsocketInstance.projects.map((name: any) =&gt; &lt;span&gt;name: {name}&lt;/span&gt;)}
                              &lt;label&gt;Project Name:&lt;/label&gt;
                              &lt;input onChange={e =&gt; this.setState({ projectname: e.target.value })}&gt;&lt;/input&gt;
                              &lt;button onClick={() =&gt; this.createProject()}&gt;Create a new project&lt;/button&gt;
  
                          &lt;/div&gt;
                          :
                          null
                  }
  
  
              &lt;/div&gt;
          )
      }
  
      createProject() {
          WebsocketInstance.createProject(this.state.projectname)
      }
  </code></pre>
  
  <p><strong><em>EDIT</em></strong>
  attempted fix:</p>
  
  <pre><code> constructor(props: Iprops) {
          super(props)
          this.state = {
              projectnames: []
          }
          this.setState({
              projectnames: WebsocketInstance.projects
          })
  }
  </code></pre>
  
  <p>and then inside the render method i added: 
  <code>{this.state.projectnames.map((name: any) =&gt; &lt;span&gt;name: {name}&lt;/span&gt;)}</code></p>
  
  <p>this did however not work</p>
  
  <p>My goal is that as soon as the websocket updates the list with the collected values the react component is refreshed and displays the list of values</p>