Socket.io only works when button is pressed on react?

Question

When I click on the button send data..React shows the data sent by socket.io. What I am trying to do is have the data shown from another app outside of react. I can see that from the server the side it emits the data when using another application, but it doesn't display on react when I try to console.log(). It will only show when i press the button? Its really weird I am not sure why that is happening? Any help would be really appreciated.

Client side

import React, {useEffect, useState} from "react";
import io from "socket.io-client";
import {connect} from 'react-redux';
import {addNewOrder} from '../service/actions';
import {Link} from "react-router-dom";
import _ from "lodash";



let socket ;
function ListOrders ({addNewOrder,orders}) {




   try {
       socket = io("http://localhost:3001");

       socket.on("add_new_order", new_order => {

           console.log(new_order);
           console.log("okk");

           //console.log("called once");

           addNewOrder(new_order);


       });

   } catch (e) {

       console.log(e)

   }







    function SendSocketData(socket) {


        /*
        *
        * Emit is all of a sudden undefined when click on the "Send Data" button second time
        *
        * */
        socket.emit("new_order", new_order => {








        });


    }



   return (



       <div className="App">
          <button onClick={()=>SendSocketData(socket)}>Send Data </button>
           {orders.map((order) =>


                   <Link to={`order_details/${order.id}`}>
                   <div>
                       <div> <b>{order.order_method}</b> </div>
                       <div> <b>{order.full_name}</b> </div>
                   </div>

                   </Link>







           )}

       </div>
   );


}


const mapStateToProps = state => ({

    orders: _.filter(state.orders,{is_confirmed: 0})


})


const mapDispatchToProps = dispatch => {

    return ({

        addNewOrder: (order) => dispatch(addNewOrder(order))


    })




}
/*
*
*
* NOT WORKING WHEN I ADD mapStateToProps
*
* */
export default connect(mapStateToProps,mapDispatchToProps)(ListOrders)



Server side 


const app = require('express')();
const server = require('http').createServer(app);

const io = require('socket.io')(server);

io.on('connection', (socket) => {

    
    //console.log(socket.id,"Connection"); // ojIckSD2jqNzOqIrAGzL



    socket.on("new_order", (arg) => {

       console.log("new_order");
       console.log(["hi"]);

        socket.emit("add_new_order",["hi"]);


    });


 });

server.listen(3001);

Try moving the code that creates the socket connection outside of the component. If you're updating the component it will create a new socket connection. This can be an uncatchable infinite loop. — yaakov, Jan 18 '21 at 20:38
I saw in the comment that `emit` is undefined the second time you click the button, is that still the case? — yaakov, Jan 18 '21 at 20:41
You're not actually going to get anything unless you click the button. Try moving the `SendSocketData` method outside of the component, and then call it inside a `useEffect` call with an empty dependency array. — yaakov, Jan 18 '21 at 20:47
I want to get something when I dont press the button. Because the data is coming from a different application — json, Jan 18 '21 at 20:53
Right, so use a [useEffect](https://reactjs.org/docs/hooks-effect.html) to run the `SendSocketData` method when the component renders for the first time. Pass an empty dependency array (see [this answer](https://stackoverflow.com/questions/58579426/in-useeffect-whats-the-difference-between-providing-no-dependency-array-and-an)) to prevent it from running on every render. — yaakov, Jan 18 '21 at 23:04

Socket.io only works when button is pressed on react?

0 Answers0