CODEWITHSUNDEEP
javascriptreactjsnext.js
Resaqw
Resaqw

Reputation: 11

React - form is not submitting when button click event changes state

I've made a button group for filtering the table. This button group just simply changes the color of an active button. So, my decision was to wrap the table and this button group into the form(for filtering the table there can be a multiple button groups, tho). As the result, when I click on the outlined button, onSubmit event is not handling. It happens only when I try to change state in button onClick of button group. How can I get my submit event from button group then?

UPD: Alright, it happens when I use getUniqueId() for keys or/and try to change type of button in my click handler even when native button is used. getUniqueId() itself just creates id from uuid v4. Onclick where I'm trying to change active button type, just comes earlier than submit event. So, the question now is it possible to change type of the clicked button from 'submit' to just 'button' to stop triggering submit event if user clicks twice on the same button without losing submit event? Any thoughts?

ButtonGroup:

interface ButtonGroupProps {
  labels: string[];
}

const ButtonGroup: FC<ButtonGroupProps> = ({ labels }) => {
  const [active, setActive] = useState<number>(0);

  const handleClick = (index: number) => () => {
    setActive(index);
  }

  return (
    <GroupWrapper>
      {labels.map((label, index) => {
        const props: ButtonProps = active === index ? ({
          variant: 'contained',
          type: 'button',
        }) : ({
          variant: 'outlined',
          type: 'submit',
          onClick: handleClick(index),
        })

        return (
          <Button
            key={getUniqueId()} 
            text={label} 
            borderRadius='16px' 
            padding='2px 12px' 
            borderWidth='2px'
            {...props}
          />
        )})}
    </GroupWrapper>
  )
}

export default ButtonGroup

Form with table:

interface InfoTableProps extends TableProps {
  fields: InfoTableField[];
  filterGroups?: [string[]];
}

const InfoTable: FC<InfoTableProps> = ({ fields, filterGroups, ...rest }) => {
  const handleSubmit = (event: FormEvent) => {
    event.preventDefault()
    console.log('button change')
  }

  return (
    <InfoTableForm onSubmit={handleSubmit}>
      {filterGroups?.map((filters) => (
        <ButtonGroup key={getUniqueId()} labels={filters} />
      ))}
      <Table {...rest}>
        <TableBody>
          {fields.map(({ head, value }) => (
            <BodyTableRow key={getUniqueId()}>
              <TableCell component='th'>
                {head}
              </TableCell>
              <TableCell>
                {value instanceof Date ? value.toLocaleDateString() : value}
              </TableCell>
            </BodyTableRow>
          ))}
        </TableBody>
      </Table>
    </InfoTableForm>
  )}

export default InfoTable

Upvotes: 0

Views: 819

Answers (1)

Resaqw
Resaqw

Reputation: 11

As I said in my question update, the reason why submit event is not happening is because of getUniqueId() but also when I was trying to change the type of the button onClick.

Thanks @juliomalves. The solution is to use your own keys (not from uuid) and just disable the button to stop triggering submit event.

Upvotes: 1

Related Questions