Styjun

i am both new user here and reactjs , i tried to make a basic tour site but get an error; I believe its because of mapping but i cant see what's wrong,
Here is error and codes:

Uncaught TypeError: Cannot read property 'city' of undefined
The above error occurred in the component:
in Tourlist (at App.js:9)
in div (at

Blockquote
App.js:7)
in App (at src/index.js:9)

Consider adding an error boundary to your tree to customize error
handling behavior.

 import React from "react"

>

 import Tourdata from "./components/Tourdata"
 import Tourlist from "./components/Tourlist.js"

 class CityTour extends React.Component 


 state=mytours:Tourdata 

 render() const touring=this.state.mytours 

 return( 
 <section>
 touring.map(item =>return <Tourlist key=item.id tourinfo=item/> )


 </section>
 ) 
 

export const Tourdata= [id:1,city:"NewYork",name:"New York museums tour",
img:"https://images.pexels.com/photos/313782/pexels-photo-313782.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"

,info: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, numquam." 

,id:2,city:"London",name:"London royal palace tour",
img:"https://images.pexels.com/photos/1837591/pexels-photo-1837591.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"

,info: "Lorem ipsum dolor sit amet, conse

ctetur adipisicing elit. Delectus reprehenderit veritatis, expedita reiciendis quia voluptatum."

,id:3,city:"Istanbul",name:"Istanbul with all aspects",img:"https://images.pexels.com/photos/1549326/pexels-photo-1549326.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
,info: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, at. Nam, voluptate assumenda!" 


,id:4,city:"Sydney",name:"Sydney city coast tour",img:"https://images.pexels.com/photos/1872047/pexels-photo-1872047.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" 
,info:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum excepturi omnis deleniti. Accusamus." ] 










import React from "react"
import "./tourlist.scss"


class Tourlist extends React.Component
state=show:false

 handleIcon=()=>this.setState(show:!this.state.show) 

 render()const city,name,img,info=this.props.tourinfo



 return( <section> 
<div className="img-containers">
<i className="fas fa-window-close fa-3x text-success"></i> 
<img src=img alt="Countryview" />
</div>
<div className="tourinfo">

<h3>city</h3>

<h4>name</h4>

<i onClick=this.handleIcon className="fas fa-caret-square-down text-success"></i>
this.state.show && <p>info </p>

</div>




</section>
 ) 

 


export default Tourlist


import React, Component from 'react';
import './App.css';
import Navbar from "./components/Navbar.js"
import Tourlist from "./components/Tourlist.js"
class App extends Component 
 render() 
 return (<div>
 <Navbar />
 <Tourlist />

 </div>
 );
 


export default App;

you declared 2 Tourlist on your code. As I understand, something is wrong with this block of code.

import React, Component from 'react';
import './App.css';
import Navbar from "./components/Navbar.js"
import Tourlist from "./components/Tourlist.js"
class App extends Component 
 render() 
 return (<div>
 <Navbar />
 <Tourlist /> //change to CityTour

 </div>
 );
 


export default App;

try importing CityTour here instead of Tourlist because as the error says city is undefined means you haven't provided the proper props needed. And according to your code CityTour is the component with mapped data component (Tourlist), so CityTour must be declared somewhere.