Pass data to "deeper down" components in React

Viewed 93

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:

  1. Doors.js
  2. DoorsItem.js
  3. DoorsDetails.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.

Match: enter image description here

1 Answers
Related