App.js:
import { useState } from 'react';
import './App.css';
import data from './Components/data.js';
import Tours from './Components/Tours';
function App() {
const [options,setoptions] = useState(data);
function removeTour(id){
console.log("this is the app");
const newt = options.filter(optionsItem=>optionsItem.id!==id);
setoptions(newt);
}
return (<div >
<div className='heading'><h2>LET'S GO OUT</h2></div>
<Tours Cards ={options} removeTour={removeTour}></Tours>
</div>
);
}
export default App;
Tours.js:
import react from 'react';
import Card from './Card';
import './Tours.css';
export default function Tours({Cards,removeTour}){
function tourcancel(id){
console.log("this is the tours");
removeTour(id);
}
return(<div className="PossibleTours">
{
/*{...x} => isse uss object ki copy pass ki jati h mtlb cloning ho rahi h .yaha map function ka use hua h alternative of for loop ye Cards wo argument h jo uper se paas hua h jiske parts pass kiye jayenge opTionNumber and optionNumber next function ka parameter h */
Cards.map((optionNumber)=>{
return <Card {...optionNumber} removeTour={removeTour}></Card>
})
}
</div>);
}
Card.js:
import React ,{useState}from 'react';
import './Card.css';
export default function Card({id,name,info,image,price},removeTour){
const [view,setview] = useState(false);//read more is visible on the screen
const [description,setdescription]=useState(`${info.substring(0,200)}...`);
const [see,setsee]= useState("Read More");
function cancel(){
console.log("card element cancel");
removeTour(id);
}
function change(){
if(!view){
setdescription(`${info}`);
setsee("Show Less");
setview(true);
}
else{
setdescription(`${info.substring(0,200)}...`);
setsee("Read More")
}
}
return (
<div className="all">
<div className='Card'>
<div className='image'>
<img src={image} alt="" />
</div>
<div className="price">
{price}
</div>
<div className='name'>
{name}
</div>
<div className="info">
{description} <span onClick ={change} >{see}</span>
</div>
<button onClick={()=>removeTour(id)}>Not Interested</button>
</div>
</div>
);
}
data.js:
const data=[
{
id:1,
name:"Agra",
info:" Agra is renowned for being home to the iconic Taj Mahal, a magnificent marble mausoleum that stands as a testament to eternal love. Varanasi, on the other hand, is a sacred city situated on the banks of the holy Ganges River. It is a spiritual hub where pilgrims come to cleanse their sins and witness mesmerizing rituals along the ghats.",
image:'https://th.bing.com/th?id=OIP.n3c9zcssq5rqkq0CjINkiQHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
price:"$25.00",
},
{
id:2,
name:"Jaipur",
info:"Jaipur, also known as the 'Pink City,'' is a vibrant and culturally rich city located in the state of Rajasthan, India. It is renowned for its majestic palaces, magnificent forts, and colorful markets. The city's distinct pink-colored buildings, which were painted to welcome the Prince of Wales in 1876, add to its unique charm.",
image:'https://th.bing.com/th?id=OIP.n9-nFss8PHb623eW6fcLYAHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
price:"$75.00",
},
{
id:3,
name:"Goa",
info:"Goa, situated on the western coast, is a popular beach destination known for its laid-back vibe, stunning sandy shores, and vibrant nightlife. It offers a mix of relaxation, water sports, and a blend of Indian and Portuguese cultures. Lastly, Dwarka, located in the state of Gujarat, is an ancient city associated with Lord Krishna. It is a significant pilgrimage site for Hindus and is believed to be one of the seven sacred cities in India.",
image:'https://th.bing.com/th?id=OIP.Rl_2JygqM5Zm6fNzlTEEXgHaE1&w=309&h=202&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
price:"$15.00",
},
{
id:4,
name:"Varanasi",
info:"Varanasi is a beautiful city.Varanasi, also known as Kashi or Banaras, is one of the oldest and holiest cities in India. Situated on the banks of the sacred Ganges River in the state of Uttar Pradesh, Varanasi is a significant pilgrimage site for Hindus. The city is known for its numerous ghats, where devotees gather to perform religious rituals and take holy dips in the river. The mesmerizing Ganga Aarti ceremony, held every evening, is a sight to behold as priests offer prayers and light lamps, creating a spiritual ambiance.",
image:"https://th.bing.com/th?id=OIP.8YFMcotGeXHDAfOgTRKCjQHaE7&w=306&h=203&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2",
price:"$25.00",
},{
id:5,
name:"Darjeeling",
info:"Darjeeling, nestled in the foothills of the Himalayas in the state of West Bengal, is a picturesque hill station renowned for its tea plantations and panoramic views. The town is famous for its Darjeeling tea, which is celebrated worldwide for its distinct flavor. Visitors can enjoy a ride on the Darjeeling Himalayan Railway, a UNESCO World Heritage Site, and witness the breathtaking sunrise over the snow-capped peaks of Kanchenjunga, the third-highest mountain in the world.",
image:"https://th.bing.com/th?id=OIP.DOKzG7e8hl182jATMzC5fwHaE6&w=306&h=203&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2",
price:"$35.00",
},{
id:6,
name:"Kochi",
info:"Kochi, located in the southern state of Kerala, is a vibrant coastal city known for its rich history and diverse cultural influences. Its picturesque backwaters, colonial architecture, and spice markets make it a captivating destination. In the northeastern part of India, Darjeeling is a hill station renowned for its tea plantations and breathtaking views of the Himalayas. Visitors can enjoy a ride on the famous Darjeeling Himalayan Railway, also known as the 'Toy Train' and explore the serene beauty of the region.",
image:"https://th.bing.com/th?id=OIP.0AsP2aiZfnmmbZM1sk2zUQHaEX&w=325&h=191&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2",
price:"$45.00",
},
{ id:7,
name:"Dwarka",
info:"Dwarka, located in the western state of Gujarat, is an ancient city associated with Lord Krishna. It is believed to be the place where Lord Krishna established his kingdom and lived with his devotees. Dwarka is home to the Dwarkadhish Temple, a significant pilgrimage site for Hindus. The temple's architecture and intricate carvings are a testament to the city's rich history and religious importance. Dwarka is also known for its beautiful beaches, such as Dwarka Beach and Beyt Dwarka, where visitors can relax and enjoy the coastal beauty.",
image:"https://th.bing.com/th?id=OIP.jX582KXnVNLRFOsgm1wJgAHaFj&w=288&h=216&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2",
price:"$55.00",
}
]
export default data;
why is it saying that removeTour is not a function?
i wanted to render the changes through app.js and what changes will be made should be decided by the child component i.e card.js . when a button not interested is getting clicked of any of the component the id will be passed to the above function and in the end in app.js , finally that element of that id should be eliminated ,