Category: javascript

Which one is better?

Using a link with a token or using a code number, i’m new on this and i’ve seen both in different pages

So i want the bot ping someone, after member get some role

this is my code

client.on('guildMemberUpdate', async(member) => {
    const memberRole = message.guild.roles.cache.find((role) => role.id ==='role id');//and this is for the role id, so the bot knows this role and the bot automatically pings someone to the channel i want

const Channel = member.guild.channels.cache.get('channel id') //and this channel id, i want the bot ping someone in this channel
    Channel.send(`here lmao <@${member.id}> `)
    .then((member)=> member.delete({
        timeout: 10000 //and this i purposely made this to look like a ghost ping
    }));
})

I know this code looks messy (: , so i’m asking for your help
Thank u!

I have a foreach that shows a couple of images, I wish for these to be deleted if needed. I fetch the src of the image and path/file name of the image from Firestore to show with the image on my site (they are uploaded to storage and firestore).

how do I identify a single image out of all of them and delete just that one?

Js Code

  const i = query(collection(db, "teamImages"));
        const unsubscribe = onSnapshot(i, (querySnapshot) => {
            const teams = document.querySelector('.teamimages');

            querySnapshot.forEach((doc) => {
                const docData = doc.data();
                const article = teams.appendChild(document.createElement('article'));
                article.innerHTML = `
        <p class="path"></p>
        <img class="team-image">
    `;
                article.children[0].textContent = docData.path;
                article.children[1].src = docData.url;

                console.log("Current data: ", docData);
            });


            document.getElementById("team-image").addEventListener("click", function deleteImage() {

                if (confirm('Are you sure you want to delete this image')) {

                   
                    



                } else {
                    // Do nothing!
                    console.log('Image not deleted');

                };


            });
        });

the images are in an articles section (createElement)

Ive had some undefined and null errors when I tried to put in any firebase delete code.

Im just not sure how I can define the image filename to use as the reference to delete the file.

I wanted to deploy a node.js backend in Heroku, working on the front end with react deployed on Vercel. From time to time, the front request to heroku backend are blocked by CORS policy, just like this:

Access to XMLHttpRequest at ‘https://pokedex-deployment-luis.herokuapp.com/pokemons/11’ from origin ‘https://react-node-pokedex-git-dev-luisea97.vercel.app’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Is strange for me, because NOT EVERY CALL TO THE BACKEND ARE BLOCKED, ONLY FROM TIME TO TIME. For example, if I reload the page 2 or 3 times it successfully make request to backend without CORS blocking.

I have my code in node like this:

index.js:

const server = require('./src/app.js');
const { conn } = require('./src/db.js');

// Syncing all the models at once.
conn.sync({ force: false }).then(
async () => {
 await server.listen(process.env.PORT, () => {
    console.log('%s listening at ' + process.env.PORT); // eslint-disable-line no-console
  });
});

app.js:

const express = require('express');
const morgan = require('morgan');
const routes = require('./routes/index.js');
const cors = require('cors')
require('./db.js');

const server = express();

server.name = 'API';

server.use(morgan('dev'));
server.use(express.json());


//Cors
server.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*'); // update to match the domain you will make the request from
    res.header('Access-Control-Allow-Credentials', 'true');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
    next();
});


server.use('/', routes);

// Error catching endware.
server.use((err, req, res, next) => { // eslint-disable-line no-unused-vars
  const status = err.status || 500;
  const message = err.message || err;
  console.error(err);
  res.status(status).send(message);
});

module.exports = server;

I’ve tried manage CORS like this:

server.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*'); // update to match the domain you will make the request from
    res.header('Access-Control-Allow-Credentials', 'true');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
    next();
});

like this other one way:

//Cors
server.use(cors())
/* server.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*'); // update to match the domain you will make the request from
    res.header('Access-Control-Allow-Credentials', 'true');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
    next();
}); */

like this other way:

server.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://react-node-pokedex-git-dev-luisea97.vercel.app/'); // with vercel production app's domain
  res.header('Access-Control-Allow-Credentials', 'true');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
  next();
});

or even like this:

server.use(cors())
server.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*'); // update to match the domain you will make the request from
    res.header('Access-Control-Allow-Credentials', 'true');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
    next();
});

with no success

Can anyone tell me what am I missing or doing wrong?
Thanks in advance:)

I am displaying the menu on the left side. As of now, there is no issue with the menu.
Now I am working on the back button. Once the user clicks on the Demo1 -> Demo 1.1 then it will show the Demo 1.1.1, Demo 1.1.2 etc. So I am planning to show back button at the top like

//back
Demo1->Demo 1.1

//dropdown
Demo 1.1.1
Demo 1.1.2
Demo 1.1.3
Demo 1.1.4

Note: My menu is completely dynamic, I don’t want to add the static value.

$('.menu-item-has-children .sub-menu').css({
  'left': '-320px'
});

$('.menu-item-has-children > a').click(function() {
  //alert('hello');

  var positionMenu = $(this).parent().attr('id');
  //console.log(positionMenu); 
  $('.menu-item-has-children[id=' + positionMenu + '] > .sub-menu').css({
    'left': '0px'
  });

});

ul {
  padding-left: 0;
}

.secondary {
  z-index: 99;
  background: #f8f8f8;
  -webkit-box-shadow: 0 8px 24px rgba(229, 228, 230, 0.4);
  box-shadow: 0 8px 24px rgba(229, 228, 230, 0.4);
  -webkit-transition: left 0.2s ease, width 0.2s ease;
  transition: left 0.2s ease, width 0.2s ease;
  border-right: 1px solid #eaedf1;
  position: fixed;
  top: 0;
  height: 100%;
  padding: 12px;
  width: 320px;
}

.menu li {
  padding-bottom: 10px;
  padding-left: 23px;
  list-style: none;
}

.menu-item-has-children>a {
  position: relative;
  display: block;
}

.menu-item-has-children .sub-menu {
  width: 100%;
  height: 100%;
  padding-top: 40px;
  background: #f8f8f8;
  list-style: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: left .3s;
  z-index: 10;
}

.menu-item-has-children>a::after {
  display: inline-block;
  vertical-align: middle;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "f054";
  position: absolute;
  right: 05px;
  top: 0px;
  font-size: 12px;
}

<script src="https://kit.fontawesome.com/97446b8f60.js" crossorigin="anonymous"></script>

<div class="secondary">
  <ul id="menu-inner-page-menu" class="menu">
    <li>Home</li>
    <li id="menu-item-204" class="menu-item-has-children"><a href="#">Demo1</a>
      <ul class="sub-menu">
        <li id="menu-item-304" class="menu-item-has-children"><a href="#">Demo 1.1</a>
          <ul class="sub-menu">
            <li><a href="">Demo 1.1.1</a></li>
            <li><a href="">Demo 1.1.2</a></li>
            <li><a href="">Demo 1.1.2</a></li>
          </ul>

        </li>
        <li id="menu-item-305"><a href="">Demo 1.2</a></li>
        <li id="menu-item-306"><a href="">Demo 1.3</a></li>
        <li id="menu-item-307"><a href="">Demo 1.4</a></li>
      </ul>
    </li>

    <li id="menu-item-205" class="menu-item-has-children"><a href="#">Demo2</a>
      <ul class="sub-menu">
        <li id="menu-item-315"><a href="">Demo 2.1</a></li>
        <li id="menu-item-316"><a href="">Demo 2.2</a></li>
      </ul>
    </li>

  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

I am trying to make select the random array element, and then want to use the selected word in the function but after using the function again it doesnt use the other random selection word.

let word = arrayOfWords[Math.floor(Math.random() * arrayOfWords.length)];

I made this in global scope but when I try to use this when I press button for the second time it doesn’t work. it just uses the one word that selcted on first button click

Im using discord.js, and im trying to make if a user sends a direct message to a bot, he will respond a simple reply such as “I’m sorry, You can not DM me. Please use the ticket system instead”

I tried using

client.on('message', msg => { 
  if (msg.channel.type == "dm") {
        msg.author.send(" blah blah example text");
        return;   }
    });

This yeilds no results.

Im totally new to coding and I would appreciate the help.

Thanks

I have an array of objects:

  const students = [
    { name: 'Tom', class: "Blue" },
    { name: 'Pom', class: "Blue" },
    { name: 'Max', class: "Red" },
    { name: 'Alex', class: "Red" },
    { name: 'John', class: "Yellow" }
  ];

And I would like to group the return values by the class property, so I can achieve something similar to this in HTML:

Class Blue: Tom, Pom
Class Red: Max, Alex
Class Yellow: John

note: the class should be displayed once..

How should I go about it? I can user filter() (like below) but this is rather silly.

const classRed = students.filter(student => student.class === "Red);
const classBlue = students.filter(student => student.class === "Blue);
...

I started this jsfiddle, but not sure how to deal with this object to display how I want it.

I’m trying to filter by dates a data table from an SQLite database in Flask using ajax and javascript, but I’m having problems retrieving the filtered data into the HTML.
I think that the major issue is that the python backend is not receiving the dates that I’m sending from the frontend and so, is not filtering the data, that is JSON format.

Here is my database model:

class Payouts(db.Model):
payout_id = db.Column(db.Integer, primary_key=True)
batch_id = db.Column(db.Integer, db.ForeignKey('batch.batch_id'))
amount = db.Column(db.Float) #in cents
date = db.Column(db.Date)
transaction_id = db.Column(db.String(100))

batchs = db.relationship('Batch', lazy=True)


def to_dict(self):
    return {
        'payout_id': self.payout_id,
        'batch_id': self.batch_id,
        'amount': self.amount,
        'date': self.date.strftime("%d/%m/%Y") ,
        'transaction_id': self.transaction_id
    }

Here is the code that gets all the data from the database:

@app.route('/admin/payouts/data', methods=['GET', 'POST'])
def payouts_data():
   return {'data': [payout.to_dict() for payout in Payouts.query]}

Here is the code that must filter the data from the database

class dates_filter(FlaskForm):
    start_date = DateField('start_date')
    end_date = DateField('end_date')


@app.route("/admin/pay/range",methods=["POST","GET"])
def range(): 

    form = dates_filter()

    if form.validate_on_submit:

        start_date = form.start_date.data
        end_date = form.end_date.data

    else: 
        start_date = datetime.strptime('1/11/2021', '%d/%m/%Y')
        end_date =  datetime.strptime('10/11/2021', '%d/%m/%Y')
        
    return {'data': [payout.to_dict() for payout in Payouts.query.filter(Payouts.date.between(start_date, end_date))]}

Here is the page that displays the data table:

@app.route('/admin/payouts', methods=['GET', 'POST'])
def payouts():
    
    form = dates_filter()

    return render_template('admin/payouts.html,form = form)

here is the html code:

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
</head>

<br>

<div class="container">
    <div class="row">
        <div class="form-group">
            <label class="col-md-12">Start Date</label>
            <div class="col-md-12">
                {{form.start_date}}
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-12"> End Date</label>
            <div class="col-md-12">
                {{form.end_date}}
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-12">
                <br>
                <input type="button" name="range" id="range" value="Range" class="btn btn-success" onclick="change()"  style="background-color: #4a88f4 !important;"/>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-md-12 mb-5">
            <div class="card h-100" style="background-color:rgba(242, 242, 242, 1); border: none;">
                <div class="card-body pt-0">
                    <div class="mx-n3" style="max-height: 30em">
                        <div class="table-responsive" style="width: 100%; size-adjust: auto; max-height: 33em; overflow-y: scroll;">
                            <table class="table table-striped table-bordered" id="data">
                                <thead>
                                    <tr style="text-align: center; position: sticky; position: -webkit-sticky; top: 0; background-color: white;"">
                                        <th class="table_cell">
                                            Actions</th>
                                        <th class="table_cell">
                                            ID</th>
                                        <th class="table_cell">
                                            Batch</th>
                                        <th class="table_cell">
                                            Date</th>
                                        <th class="table_cell">
                                            Amount BTC</th>
                                        <th class="table_cell">
                                            Transaction ID</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

And here is the javascript code, which is divided into two parts, the first retrieve all the data from (without filtering), and the second part, cleans the table section and must retrieve the data filtered by dates, but whenever I click the button to filter, the query just stays empty.

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url: "{{ url_for('payouts_data')}}",
            dataType: 'json',
            type: 'get',
            cache: true,
            success: function (data) {
                var event_data = '';
                $.each(data.data, function (index, value) {
                    event_data += '<tr>';
                    event_data += '<td style="align-content: center; width: 100px; min-width: 100px;> 
                                                <i class="fas"></i> 
                                            <a href = "/admin/payouts/' + value.payout_id + ' " type="submit" class="btn btn-primary btn-sm" style="background-color: #4a88f4 !important;"> 
                                                <i class="fas fa-eye"></i></a> 
                                            <a href = "/admin/payouts/' + value.payout_id + ' " type="submit" class="btn btn-primary btn-sm" style="background-color: #4a88f4 !important;"> 
                                                <i class="fas fa-edit"></i></a> 
                                     </td>';
                    event_data += '<td style="text-align:center;">' + value.payout_id + '</td>';
                    event_data += '<td style="text-align:center;">' + value.batch_id + '</td>';
                    event_data += '<td>' + value.date + '</td>';
                    event_data += '<td>' + value.amount + '</td>';
                    event_data += '<td>' + value.transaction_id + '</td>';
                    event_data += '</tr>';
                });
                $("#data").append(event_data);
            },
            error: function (d) {
                alert("404. Please wait until the File is Loaded.");
            }
        });
        change = function () {
            $("#data").empty();
            $.ajax({
                url: "{{ url_for('range')}}",
                dataType: 'json',
                type: 'get',
                cache: true,
                success: function (data) {
                    var event_data = '';
                    $.each(data.data, function (index, value) {
                        event_data += '<tr>';
                        event_data += '<td style="align-content: center; width: 100px; min-width: 100px;> 
                                                <i class="fas"></i> 
                                            <a href = "/admin/payouts/' + value.payout_id + ' " type="submit" class="btn btn-primary btn-sm" style="background-color: #4a88f4 !important;"> 
                                                <i class="fas fa-eye"></i></a> 
                                            <a href = "/admin/payouts/' + value.payout_id + ' " type="submit" class="btn btn-primary btn-sm" style="background-color: #4a88f4 !important;"> 
                                                <i class="fas fa-edit"></i></a> 
                                     </td>';
                        event_data += '<td style="text-align:center;">' + value.payout_id + '</td>';
                        event_data += '<td style="text-align:center;">' + value.batch_id + '</td>';
                        event_data += '<td>' + value.date + '</td>';
                        event_data += '<td>' + value.amount + '</td>';
                        event_data += '<td>' + value.transaction_id + '</td>';
                        event_data += '</tr>';
                    });
                    $("#data").append(event_data);
                },
                error: function (d) {
                    alert("404. Please wait until the File is Loaded.");
                }
            });
        }
    });

</script>

Attached there are some images of the front, before and after clicking the button.

Before clicking the button

After clicking the button

Json data, without filtering

I hope that someone can help me!! regards.

Having trouble converting this to jsx, i know the tag itself in html represents jsx but when i add it to a new file thats a .js it just reads my code as text? it just displays my code as text on the webpage
(this code works on an html page, its an input box where a user would input an email for a newsletter)

<html>
<body>
   ...styling code elements
   ...styling code elements

<button  class="join" id = "join"> join </button>
  
        <script>
            let email = document.getElementById("email")
            document.getElementById("join").onclick = () => {
                console.log(email.value)
                fetch("/sendemail?email=" + email.value, {
                    method: "POST"
                }).then((res) => {
                    // success
                    alert("success")
                }).catch((err) => {
                    // error 
                    alert(err)
                })
            }
        </script>
   </body>
</html>

So you know how extensions work in Google, right? You click a button and it opens this small window within the internal webpage. I know how to make a button open an external window, but how do I make it work similarly to an extension. Basically, I’d like to have an html page where I can click a button and it’ll open a small popup of another .html file within the first html page. So it would be this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup but where it says “A Simple Popup!” it’s an .html page.

my english is not so good but i try my best to explain my problem and i try like 10 topics to find a solution but im cant figure..

i want after i press this div

 <div id="test" class="br3 mb3 ph3 pv2 ba b--black-10 flex justify-between items-center pointer hover-b--primary5">
 <div class="f5 flex items-center">Test1</div>

to block the display to show the content of this div

 <div id="modal" style="display: none; width: 370px; position: fixed; right: 2px; top: 0; z-index: 99; background-color: white; border-radius: 0px 0px 10px 10px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);">

Thanks and have a great day 🙂

I have a simple table that by default shows a single row, with an add button for users to add additional rows if required. I have a delete icon showing in the last column for users to delete a row if they made a mistake, however this only works for the first table row and doesn’t work for any rows the user has added themselves.

Here’s a sample of how this looks:

$(document).ready(function() {
  $("#addRow").click(function() {
    var markup = "<tr><td><input type="text" class="form-control" autocomplete="off" placeholder="Serial" name="serial"></td><td></td><td></td><td></td><td><span class="glyphicon glyphicon-trash"></span></td></tr>";
    $("#shipmentConsignment").append(markup);
  });

  // Find and remove selected table rows
  $("#deleteRow").click(function() {
    $(this).closest('tr').remove();
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


<table id="shipmentConsignment" class="table table-condensed table-striped table-bordered">
  <thead>
    <th class="text-center" scope="col" width="20%">Serial</th>
    <th class="text-center" scope="col" width="15%">ID</th>
    <th class="text-center" scope="col" width="15%">Code</th>
    <th class="text-center" scope="col" width="45%">Description</th>
    <th class="text-center" scope="col" width="5%"></th>
  </thead>
  <tbody>



    <tr>
      <td><input type="text" class="form-control" autocomplete="off" placeholder="Serial" name="serial"></td>
      <td></td>
      <td></td>
      <td></td>
      <td id="deleteRow"><span class="glyphicon glyphicon-trash"></span></td>
    </tr>


  </tbody>
</table>


<button type="button" name="addRow" value="addRow" id="addRow" class="btn btn-primary">Add Item</button>

I’m trying to write a function that will return an object omitting key(s) from a possibly nested items in an array. I found a close answer on a different question, but not quite what I was looking for. Any feedback would be greatly appreciated! Here is the code I’m tinkering with right now;

function omit(obj, keys) {
    let newObj = [];
    for (let i of obj) {
        if (i === keys) {
            //do nothing
        } else {
            //newObj.push[i]; nope?
            return newObj;
        }
        //return newObj;
    }
}

I’m really confused on what’s going on with my code. I have a Menu, that has list of avatars, and then another button in list. The last button, is another menu, that pops up a TextField. For some reason in the Textfield, Ever keystroke is recorded in the input, except when I hit ‘a’. It automatically unfocuses. I’m not sure what’s going on. Any insight on what’s going wrong?

   return (<div id={row.name + "-" + "div"}>
        <IconButton className="hideAddIcon"
            id={row.name + "-" + "basic-button"}
            key={row.name + "-" + "icon"}
            aria-haspopup="true"
            aria-controls="basic-menu"
            aria-haspopup="true"
            aria-expanded={open ? 'true' : undefined}
            onClick={(e) => handleClick(e, row.name)}
        >
            <AddCircleOutlineIcon fontSize="medium" />
        </IconButton>
        <Menu
            style={{
                paddingBottom: '0px'
            }}
            id={row.name + '-menu'}
            key={row.name + '-menu-icon'}
            anchorEl={anchorEl && anchorEl[row.name]}
            open={Boolean(anchorEl && anchorEl[row.name])}
            onClose={handleClose}
            MenuListProps={{
                'aria-labelledby': 'basic-button',
            }}
        >
            {
                Array.from(selectionMenuData.keys()).map((key, index) => {
                    return <MenuItem key={row.name + '-' + index} value={row.name} style={{ maxHeight: '55px' }} onClick={(e) => addPersonToList(row, selectionMenuData.get(key))}>
                        {(() => {
                            switch (row.sourceType) {
                                case 'People':
                                    return (
                                        <ListItemAvatar>
                                            <Image src={selectionMenuData.get(key).Avatar} className={classes.peopleMenuPicture} />
                                        </ListItemAvatar>
                                    );
                                case 'Seller Competition':
                                    return (
                                        <ListItemAvatar style={{
                                            minWidth: '90px', display: 'flex',
                                            justifyContent: 'center',
                                        }}>
                                            <Image src={selectionMenuData.get(key).Logo} />
                                        </ListItemAvatar>
                                    )
                            }
                        })()}
                        <ListItemText>{key}</ListItemText>
                    </MenuItem>
                })
            }
            {(row.sourceType === 'People' || row.sourceType === 'Seller Competition') ?
                <MenuItem key="addNewPersonMenu" onClick={(e) => secondMenuClick(e, 'addPerson')}>
                    <ListItemAvatar style={{
                        minWidth: '90px', display: 'flex',
                        justifyContent: 'center',
                    }} >
                        <AddCircleOutlineIcon sx={{ width: row.sourceType === 'Seller Competition' ? '53px' : '84px' }} />
                    </ListItemAvatar>
                    <ListItemText >
                        {menuText}
                    </ListItemText>
                    <Popover
                        id="add-person-menu"
                        anchorEl={anchorEl && anchorEl['addPerson']}
                        open={Boolean(anchorEl && anchorEl['addPerson'])}
                        onClose={(e) => handleCloseDialog(e)}
                        MenuListProps={{
                            'aria-labelledby': 'add-person-button',
                        }}
                        anchorOrigin={{
                            vertical: 'top',
                            horizontal: 'left',
                        }}
                        transformOrigin={{
                            vertical: 'top',
                            horizontal: 'left',
                        }}
                    >
                        <div style={{ paddingLeft: 10, paddingRight: 10, width: '20em' }} tabIndex={0} >
                            <TextField id="outlined-basic" label="LinkedIn URL" id='add-person-name' autoFocus
                                variant="outlined" fullWidth autoComplete='off' type='text' name='linkedinUrl'
                                placeholder="Enter LinkedIn URL..." onKeyDown={(e) => submitNewPerson(e, row)} />
                            {/* <input type="text" id="submitPeople" name="addPeople"></input> */}

                            {console.log(anchorEl)}
                        </div>
                    </Popover>
                </MenuItem> : <div>Not Added</div>
            }
        </Menu>
    </div>)
}