Btukfyl

I have a main page with job listings.

Once a user clicks on a specfic job listing, a new site route e.g. "homepage.com/jobs/12345" shall open the description of the clicked job.

All of the information for the jobs are stored in an array. Each job is stored in an object.

My Question: How can I show the description of the clicked job (description key from clicked job item) on a new route like in example URL above?

An item in the array looks like this:

  {

    "id": "12345",

    "position": "Marketing Manager",

    "company": "Apple",

    "description": "Lorem ipsum",

    "date": "2018-11-27T23:11:27Z"

  },

Routing in App.js looks like this:

<Router>

        <React.Fragment>

          <Route

            exact

            path="/"

            render={() => (

              <Home jobs={filteredJobs} searchChange={this.onSearchChange} />

            )}

          />

          <Route

            path="/jobs/:id"

            render={({ match }) => (

              <div>

                <Description

                  description={

                    this.state.jobs.find(job => job.id === match.params.id)

                      .description

                  }

                />

              </div>

            )}

          />

        </React.Fragment>

      </Router>

Home.js looks like this:

render() {

    const { jobs, searchChange } = this.props

return (

  <React.Fragment>

    <Navigation />

    <Filter searchChange={searchChange} />

    <Categories searchChange={searchChange} />

    {jobs.map((job, index) => (

      <JobCard

        key={index}

        id={job.id}

        position={job.position}

        company={job.company}

        image={job.image}

        date={job.date}

      />

    ))}

  </React.Fragment>

)}

JobCard.js looks like this:

render() {

    const { company, date, position, image, id } = this.props

    return (

      <Router>

        <Card data-cy="JobCard" to={`/jobs/${id}`}>

          <Image src={image} />

          <Position>{position}</Position>

          <Company>{company}</Company>

          <Date>

            <Moment format="D MMM">{date}</Moment>

          </Date>

        </Card>

      </Router>

    )

  }

Thanks!

We are using react-router and redux for fetching data.

Our way in routes:

            <Route path="jobs/:id" component={ Job }/>

in Job Component you will need to fetch your data:

const mapStateToProps = ({ job }) => ({ job });



const mapDispatchToProps = dispatch => ({

    actions: bindActionCreators({

        fetchJob

    }, dispatch)

}

);



@connect(mapStateToProps, mapDispatchToProps)

export default class Job extends Component {



// your code here



}