Can you tell me why my my props.id is coming out to be undefined

Question

This is the file where in the console, I am trying to print props.name, props.images and props.id. name and images are correct but the id is coming out to be undefined. You can see in the function changetext I am printing the 3 things in the console.

Moreover, if I am using props.images instead of props.id then it is working.

import React from 'react'
import './Body.css' 
import { infoarray } from './Menu'
import { useState } from 'react'
export default function Pricetag(props) {
  const [value, setvalue] = useState("Add to Cart")
  const [disvalue, setdisvalue] = useState(false)
  const [mystyles, setmystyles] = useState({
    color:'white',
    background:'#094784'
  })

  const changetext = (e) =>{
      console.log("that  -> "  , props.name , props.images ,props.id) ; 
      if(mystyles.color=== 'white'){
          setmystyles({
            color : 'white',
            background : 'red'
          })
      }
      setdisvalue(true); 
      setvalue('Added to Cart ✔'); 
  }

  return (
        <div className="button">
          <button disabled={disvalue} style={mystyles} className='btn no1' 
           onClick={ ()=> { infoarray.push(props.id); changetext(); }}>
            {value}
          </button>
          <br></br>
        </div>
  )
}

infoarray is an array declared as follows

const infoarray = [];
export { infoarray };
export const changedArray = newinfoArray => infoarray = newinfoArray;

data is a js object looks like this

export const data = [
    {
        id:1 ,
        name: "Almond Cake" ,
        images : images01
    },
    
    {
        id:2 ,
        name: "Cartoon cake" ,
        images : images02
    },
    
    {
        id:3 , 
        name: "Choco pie cake " ,
        images : images03
    }
]

What is wrong here?

Edit

import React from 'react'
import { data } from './Data'
import './cartstyle.css'
import Cartitems from './Cartitems';
import { infoarray } from './Menu';
export default function Gotocart() {
  infoarray.forEach(element => {
    console.log("this is the element -> " , element);
  });
  return (
    <div className='cartbody'>

      <div className="cart-info" id='cartinformation'>
        {
          data.map((e) =>{
            return infoarray.map((ank) =>{
                  if(ank==e.id){
                  return (<Cartitems key={e.id} name={e.name} images ={e.images}/>);
                  }
                  else {
                    return null ; 
                  }
                });
          })
        }
      </div>
  )
}

using Pricetag

import React from 'react'
import './Body.css'
import { Link } from 'react-router-dom'
import Pricetag from './Pricetag'
import image80 from './assets/cake80.jpeg'
import image81 from './assets/cake81.jpeg'
import image82 from './assets/cake82.jpeg'
import image83 from './assets/cake83.jpeg'


export default function Cakebody(props) {
    return (
        <>
            <Link to='/' className="menulink con112 ">
                <div className='name1' >Back to home page</div>
            </Link>
            <div className="headingbody">
                {props.title}
            </div>
            <hr className='latestline' />
            <div className='container1'>
                <Pricetag id='52' images={image80} name="Doll Cake" bold="Rs 345" cut="Rs 634" />
                <Pricetag id='53' images={image81} name="Mixed Platte Cake" bold="Rs 345" cut="Rs 634" />
                <Pricetag id='54' images={image82} name="Pinata  Cake" bold="Rs 345" cut="Rs 634" />
                <Pricetag id='55' images={image83} name="Bomb  Cake" bold="Rs 345" cut="Rs 634" />
            </div>
        
    )
}

Answer 1

Is your Pricetag component called the same way Cartitems is in Gotocart? (actually I'm somehow guessing that they're the same else there's no link between the 2 files) If so, then you passed the id as "key", not as "id", you should do both for React sake and to be able to access props.id within it.

What you most likely have:

<Pricetag key={e.id} name={e.name} images={e.images}/>

What you want:

<Pricetag key={e.id} id={e.id} name={e.name} images={e.images}/>

Unrelated: I believe infoarray looks like it should be a proper React state, with a setter, passed as a prop to child components. Else things will be more and more messy the more you work with it.