React TypeError: Cannot read properties of undefined (reading 'state')

May 31, 2022

I want to update the text of a button when i click on that button. I am using setState for that but i am unable to use it as it gives me the following error:

TypeError: Cannot read properties of undefined (reading 'state')

Here is my code:

import Head from 'next/head';
import { Box, Container, Grid, Pagination } from '@mui/material';
import { products } from '../__mocks__/products';
import { ProductListToolbar } from '../components/product/product-list-toolbar';
import { ProductCard } from '../components/product/product-card';
import { DashboardLayout } from '../components/dashboard-layout';
import { CustomerListResults } from '../components/trip/trip-list-results';
import { customers } from '../__mocks__/customers';
import { trips } from '../__mocks__/trips';
import { TripListResults } from '../components/customer/customer-list-results';
import {
  Avatar,
  Card,
  Checkbox,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TablePagination,
  TableRow,
  Typography,
  Button
} from '@mui/material';
import NextLink from 'next/link';

const TripRequests = () => {
    
    const accept =()=> {
        this.setState({accept: 'Payment Pending'})
        console.log("fsfdsa");
    };
    this.state = {
        accept: "Accept"
    };
    
    return (
  <>
    <Head>
      <title>
        Trip Requests
      </title>
    </Head>
    <Box
      component="main"
      sx={{
        flexGrow: 1,
        py: 8
      }}
    >
      <Container maxWidth={false}>
        <Box sx={{ mt: 3 }}>
          {/* <CustomerListResults customers={trips} /> */}
          <h2>Trip Requests (2)</h2>
        </Box>
        <Box sx={{ minWidth: 1050, mt: 3 }}>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell padding="checkbox">
                  {/* <Checkbox
                    // checked={selectedCustomerIds.length === customers.length}
                    color="primary"
                    // indeterminate={
                    //   selectedCustomerIds.length > 0
                    //   && selectedCustomerIds.length < customers.length
                    // }
                    // onChange={handleSelectAll}
                  /> */}
                </TableCell>
                {/* <TableCell>
                  Trip Id
                </TableCell> */}
                <TableCell>
                  Customer
                </TableCell>
                <TableCell>
                  Departure
                </TableCell>
                <TableCell>
                  Destination
                </TableCell>
                <TableCell>
                Truck / Driver
                </TableCell>
                <TableCell>
                Action
                </TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
             
                <TableRow
                
                  hover
                //   key={customer.id}
                //   selected={selectedCustomerIds.indexOf(customer.id) !== -1}
                >
                  <TableCell padding="checkbox">
                    {/* <Checkbox
                      checked={selectedCustomerIds.indexOf(customer.id) !== -1}
                      onChange={(event) => handleSelectOne(event, customer.id)}
                      value="true"
                    /> */}
                  </TableCell>
                  <TableCell>
                    Rohan Joshi 
                  </TableCell>
                  <TableCell>
                    <Box
                      sx={{
                        alignItems: 'center',
                        display: 'flex'
                      }}
                    >
                      {/* <Avatar
                        src={customer.avatarUrl}
                        sx={{ mr: 2 }}
                      >
                        {getInitials(customer.name)}
                      </Avatar> */}
                      <Typography
                        color="textPrimary"
                        variant="body1"
                      >
                        A-50, Sec 67, Noida
                      </Typography>
                    </Box>
                  </TableCell>
                  
                  <TableCell>
                   HUDA City Center
                  </TableCell>
                  
                  <TableCell>
                    fds
                  </TableCell>
                  <TableCell>
                    <Button onClick={accept}>{state.accept}</Button>
                    <Button>Decline</Button>

                  </TableCell>
                 
                  {/* <TableCell>
                    {format(customer.createdAt, 'dd/MM/yyyy')}
                  </TableCell> */}
                </TableRow>

            </TableBody>
          </Table>
        </Box>
        
      </Container>
    </Box>
  </>
);

TripRequests.getLayout = (page) => (
  <DashboardLayout>
    {page}
  </DashboardLayout>
)};

export default TripRequests;

>Solution :

Looks like you are mixing class-based components with function components. In your case this refers to the module-level this which is undefined. Function components don’t make use of this.

To use state in function components you need to use the useState hook:

const TripRequests = () => {
  const [acceptState, setAcceptState] = useState('Accept')
 
  const accept = () => setAcceptState('Payment Pending')

  // ...
}