CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-hooks
theastronomist
theastronomist

Reputation: 1056

Expected an assignment or function call and instead saw an expression react router

I have button in a Material Table. I am using react routers to route pages to different URLs. This page is supposed to set up functions and call the Material Table <MuiTable> and then render a button below the material table. It is set up this way due to the reusability of the MuiTable element.

export default function ListJobs(props) {

  const url = 'http://localhost:8000/api/Jobs/'
  const [data, loading] = DataLoader(url);
  const handleEdit = (e,rowData) => {
    <EditJob id={rowData.id} />
  }
  const handleDelete = (e,rowData) => {
    //edit operation
    <ListJobs />
    DataDelete(url, rowData.id)

  }
  const createButton = 
    <div style={{display: 'flex',  justifyContent:'center', alignItems:'center'}}>
    <Button 
        component={Link} to='/Job/Create'
        variant="contained"
        color="primary">
        Create New Job
      </Button>
    </div>

  return (
    <> {loading ? (
    <Grid
        container
        spacing={0}
        alignItems="center"
        justify="center"
        style={{ minHeight: '90vh' }}
      >
    <CircularProgress size="10vh" />
    </Grid>
    ) : (
      <MuiTable 
        model="Job" 
        data={data} 
        url={url} 
        handleEdit={handleEdit} 
        handleDelete={handleDelete} 
        createButton={createButton}
        />
    )}
    </>
    );
}

This currently throws and error "Expected an assignment or function call and instead saw an expression" on the lines that call <EditJob...> and <ListJobs>. I know this is not the correct way to write this but, I want to change it to using react routers. I have my routers set up already but don't know how to use them in this instance. I want it to work something like this.

const handleEdit = (e,rowData) => {
    <component ={Link} to='Jobs' />
  }

I know this isn't correct eit,her because the react router link must be inside of a component like a<button>or <MenuItem>.

Upvotes: 0

Views: 81

Answers (1)

hlkughl
hlkughl

Reputation: 326

Try to return EditJob and ListJobs

const handleEdit = (e,rowData) => {
    return <EditJob id={rowData.id} /> // return the function <EditJob />
}
const handleDelete = (e,rowData) => {
    //edit operation
    DataDelete(url, rowData.id) // Any operation before the return
    return <ListJobs /> // return the function <ListJobs />
}

Upvotes: 1

Related Questions