Passing Arguments to a React Element in a React Router

Question

I have created a Element called Jobscard that takes jobsList as an argument. I am also trying to set this jobsCard as a Router using the react-router.

I have looked into the problem and their seems to be no similar problem on the web, all solutions and guides use react components but this doesn't work for react Elements. Is this possible?

import React from 'react';
import { projectList } from './projectList';
import JobsCard from './JobsCard';
import { jobsList } from './jobsList';
import CardList from './CardList';
import Ham from './hamburger';
import { Route, Switch } from 'react-router-dom';
import { BrowserRouter } from 'react-router-dom';
import jobsList from './jobsList'

const App = () => {
    return(

            <div className='blue1  center'>

                    <BrowserRouter>
                        <Ham />

                        <Switch>
                            <Route exact path="/" render{props => <JobsCard jobsList={jobsList}> </JobsCard> }/>

                           <Route path="/projects" component={<CardList projectList={projectList}/>}/> 
                        </Switch>
                    </BrowserRouter>


            </div>

  )
}

export default App;

The JobsCard Element is

import React from 'react';
import Job from './Job.js'

const JobsCard = ({jobsList}) => {
    const cardDraw = jobsList.map((proj, i) => {
        return <Job key={i} title={jobsList[i].title} 
        website={jobsList[i].website} description={jobsList[i].description} 
        logo={jobsList[i].logo} company={jobsList[i].company} years={jobsList[i].years}/>
    })
    return (
        <div className=" cf justify-center ma3">
                {cardDraw}


        </div>
    );
}

export default JobsCard;

jobsList looks like this

import energyxchain from ''
export const jobsList = [
    {   title: '',
        website: '',
        description: '',
        logo: ,
        company: '',
        years: '2018-2019'
    },
    {
        title: '',
        company: '',
        website: '',
        logo: '',
        description: '',
        years: '2017-2018'
    }];

I would like the jobsCard to be a route.

Answer 1

From route rendering props :

render , which takes an inline function, should only be used when you have to pass in-scope variables to the component you want to render.

You should not use the component prop with an inline function to pass in-scope variables because you will get undesired component unmounts/remounts.

So your route should be either the ff:

Using component prop (should not pass variable):

<Route
  exact path="/"
  component={JobsCard}
/>

Using render prop:

<Route
  exact path="/"
  render={routeProps => (<JobsCard {...routeProps} jobsList={jobsList} />)}
/>

Normally, you should separate navigation from the internal data management (using redux connect ).

Answer 2

Change const JobsCard to function JobsCard

If you are planning to use a constant, it shouldn't have any arguments. you can do

const paragraph = <p>Hello World!</p>

and render inside a react component using {paragraph}