First of all. Sorry about my title, I have been thinking over ten minutes of what I'm going to name my question. But I got nothing, however..
In my app I have three components that basically belongs to each other.
I have:
Doors.jsDoorsItem.jsDoorsDetails.js
So, in Doors.js I have this line of code:
const items = dataToDisplay.map(item => <DoorsItem item={item} />)
And here I'm creating a new element called DoorsItem with it's props equal to item.
And in my DoorsItem.js I have this:
const DoorsItem = ({ item }) =>
<Grid>
<Row key={item._id} className="show-grid">
<Col md={12}>
<ul style={{ marginTop: '10px' }}>
<li className="info-container">
<h4 className="title-text-container">{item.address.street}</h4>
<a
className="sub-title-text-container"
style={{
fontWeight: '300',
textDecoration: 'underline',
marginLeft: '500px'
}}
>
Lägg till ny användare
</a>
<Link to={`/log/${item._id}`}>
<p
className="sub-title-text-container"
style={{
fontWeight: '300',
textDecoration: 'underline'
}}
>
Se logg
</p>
</Link>
//etcetc
Because I am passing in item at the top I’m getting access to all of the different types of props. Like item.address.street i.e.
At: <Link to={/log/${item._id}}> I am linking to a specific path based on an id. And everything works great! However…
When I’m getting deeper into the rabbit hole (DoorDetails.js) I got this:
const DoorDetails = ({ match }) => {
// console.log(item) Undefined!!!
return (
<div>
<MainNavbar />
<Grid>
<Row className="show-grid">
<Col md={12}>
<h1 className="text-center">Sätraängsvägen 12</h1> // Need non-static-address here :p
</Col>
</Row>
My item props is undefined, which I get because I’m passing in match here because that’s how react router V4 works (I based that on the internet hehehe).
Question:
So my question is how can I access my item props so I can start rendering non-static-data. Like item.address.street.
