This is the file where in the console I print the props.name, props.images path, and props.id. name and images path are correct but the id is coming out to be undefined. Earlier it was fine.
You can see in the function change text 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>
)
}
CodePudding user response：
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.
CodePudding user response：
⚠️ I am new to react.
Please use data-* attribute in react. This may be caused by react-oriented behaviour as react transcripts your statically written classes and ids to some kind of arbitraries.
In my opinion, The pricetag component should be
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 shit -> " , props.name , props.images ,props['data-*']) ;
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['data-*']); changetext(); }}>
{value}
</button>
<br></br>
</div>
)
}
The usage pricetag component should be as follow.
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 data-id='52' images={image80} name="Doll Cake" bold="Rs 345" cut="Rs 634" />
<Pricetag data-id='53' images={image81} name="Mixed Platte Cake" bold="Rs 345" cut="Rs 634" />
<Pricetag data-id='54' images={image82} name="Pinata Cake" bold="Rs 345" cut="Rs 634" />
<Pricetag data-id='55' images={image83} name="Bomb Cake" bold="Rs 345" cut="Rs 634" />
</div>
)
}