列表中的每个孩子都应该有一个独特的“关键”道具。 但我没有调用任何组件

Question

if i call all discount price using map method. it perfectly work but i see in console and like this error are found. how to fix it

 <div className="priceCal flex flex-col items-center">
       <p style={{ fontSize: '1.5em' }} className='font-medium pt-3'>Total items: </p>
          {
            data.map((v, i)=>{
            return <p className='font-bold text-xl'>Rs. {v.DiscountPrice}</p>
             })
         }
</div>

Click to view the error

react-jsx-dev-runtime.development.js:117 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Cart`. See https://reactjs.org/link/warning-keys for more information.
    at p
    at Cart (http://localhost:3000/static/js/bundle.js:3393:74)
    at Routes (http://localhost:3000/static/js/bundle.js:63733:5)
    at RouterMenu
    at App (http://localhost:3000/static/js/bundle.js:140:81)
    at Router (http://localhost:3000/static/js/bundle.js:63666:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:63146:5)

Answer 1

You need to add a key to the parent element of the return like this

return <p className='font-bold text-xl' key={i}>Rs. {v.DiscountPrice}</p>

But it's better to use a unique property of the object like key={v.id} if id exists

Answer 2

You are looping over

data.map((v, i)=>{
        return <p className='font-bold text-xl'>Rs. {v.DiscountPrice}</p>
})

Just add a key to the return JSX

data.map((v, i)=>{
        return <p key={index} className='font-bold text-xl'>Rs. {v.DiscountPrice}</p>
})

If you have a unique identifier in the v object, use that

Refer => https://reactjs.org/docs/lists-and-keys.html#keys

Answer 3

I want code and API to fetch data from database buy passing query for one specific id. I tried the code but the code is throwing error. I have already connected database and I have already coded an API to fetch all the data from the database.

below i have attached my code

  app.get('/:Employee_id', (req,res) => {
            pool.getConnection((err, connection) =>{
                if(err) throw err;
                console.log('connected as id' + connection.threadId);
                
                connection.query('Select* from employee where Employee_id = ?', [req.params.Employee_id], (err, rows)=>{
                    connection.release();
                    
                    if(!err){
                        res.send(`employee with the id: ${Employee_id}`);
                    }
                    else{
                        console.log(err);
                    }
                });
            });
        });