React: Update an array in component and display it as list

Question

I can't seem to figure this out.

I have a socket.io connection to my node server. When ever I emit a message I want to add it to an array and display that array as a scrollable list in the page.

Also what is a good place to declare this array?

import React from 'react';
import './App.css';
import socket from "./index.js";
import UpdateSocketInfo from './socketinfo';
//import statusInfoArray from "./socketinfo";

function App() {

    // where do I declare the array statusInfoArray? If i do it inside App it will be empty always?

  socket.on("uploadProgress", data => {
    statusInfoArray.push(data)
    console.log(data);
  });

  return (
    <div className="App">
      <UpdateSocketInfo statusInfoArray={statusInfoArray} />

    </div>
  );

}

export default App;

my socketinfo module

import React from 'react';

// set up status list, is this a good place to declare the array?
//const statusInfoArray= []
//export default statusInfoArray;

export const UpdateSocketInfo = props => {
    const statusInfoArray= props;
    const returnList = statusInfoArray.map((item) =>
    <li>
        <span>
            {item}
        </span>
    </li>
    );
    return (<ul>{returnList}</ul>)
}

Giovanni Esposito · Accepted Answer · 2021-07-22 12:25:55Z

1

I think you could use state variable in App component. Then pass array to UpdateSocketInfo via props. Something like:

App.js

import React, { useState } from 'react';
import './App.css';
import socket from "./index.js";
import UpdateSocketInfo from './socketinfo';
//import statusInfoArray from "./socketinfo";

function App() {

   const [statusInfoArray, setStatusInfoArray] = useState([]);

  socket.on("uploadProgress", data => {
    setStatusInfoArray(prevVals => [...prevVals, data]);
    console.log(data);
  });

  return (
    <div className="App">
      <UpdateSocketInfo statusInfoArray={statusInfoArray} />

    </div>
  );

}

export default App;

UpdateSocketInfo.js

import React from 'react';

export const UpdateSocketInfo = props => {
    const { statusInfoArray } = props;
   
    return (
      <ul>
         {statusInfoArray.map((item) => (
           <li>
             <span>
               {item}
             </span>
          </li>
         ))}
    </ul>
   );
}

answered Jul 22, 2021 at 12:25

Giovanni Esposito

11.3k1 gold badge19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

eemilk Over a year ago

Works, but for some reason I can't explain I get a dozen of the same emit message in the list from socket.on("uploadProgress", data =>, and with @Tushar Shahi's answer I don't

eemilk Over a year ago

Okay, I tried this with putting socket.on... inside useEffect hook and rendering it only once. This answer works actually better than any of the other answers. I want to give credit here. Oh and I have a also id for the array for the <li key=item.id></li>.

Giovanni Esposito Over a year ago

@eemilk You could always set my answer as the correct one =)

Tushar Shahi · Accepted Answer · 2021-07-22 12:22:37Z

1

You want to update the view every time your variable changes, so it should be a state variable.

Once you have a state you cannot mutate it. So create a copy using ... and add data.

import React from 'react';
import './App.css';
import socket from "./index.js";
import UpdateSocketInfo from './socketinfo';
//import statusInfoArray from "./socketinfo";


function App() {
    const [statusInfoArray , setStatusInfoArray] = React.useState([]);
    // where do I declare the array statusInfoArray? If i do it inside App it will be empty always?

  socket.on("uploadProgress", data => {
    let newStatusInfoArray = [...statusInfoArray,data];
    setStatusInfoArray(newStatusInfoArray);
    console.log(data);
  });

  return (
    <div className="App">
      <UpdateSocketInfo statusInfoArray={statusInfoArray} />

    </div>
  );
}

answered Jul 22, 2021 at 12:22

Tushar Shahi

21.6k2 gold badges25 silver badges48 bronze badges

1 Comment

eemilk Over a year ago

This works great, thank you. Now I need to read more about state variables

AdityaParab · Accepted Answer · 2021-07-22 12:21:16Z

0

Simple, use the React.useState

import React from 'react';
import './App.css';
import socket from "./index.js";
import UpdateSocketInfo from './socketinfo';
//import statusInfoArray from "./socketinfo";

function App() {

    // where do I declare the array statusInfoArray? If i do it inside App it will be empty always?

  const [statusInfoArray, setStatusInfoArray] = React.useState([]);

  socket.on("uploadProgress", data => {
    setStatusInfoArray(data);
    console.log(data);
  });

  return (
    <div className="App">
      <UpdateSocketInfo statusInfoArray={statusInfoArray} />

    </div>
  );

}

export default App;

answered Jul 22, 2021 at 12:21

AdityaParab

7,1003 gold badges30 silver badges40 bronze badges

1 Comment

eemilk Over a year ago

I get a TypeError: statusInfoArray.map is not a function with setStatusInfoArray(data); and with @Tushar Shahi's answer I get the component to work.

Collectives™ on Stack Overflow

React: Update an array in component and display it as list

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related