My onClick button is not working on next js

Asked

Viewed 72 times

1

onClick buttons are working normally on other components, except in this specific case.

Obs: I’m using Styled Components for these components around.

import ContainerForm from '../components/form/ContainerForm';
import ContentForm from '../components/form/ContentForm';
export default function Form(){

    const Teste = ()=>{
       <div>
            <input type="button" onClick={()=>console.log('ok')} 
            value="clique"/>
        </div>
    }
    return <ContainerForm><ContentForm><Teste/></ContentForm></ContainerForm>
}
react

  • Input by default has its type set to text. For this to be a button, you need to set the type to the button or Submit value'.

  • I had already done so, I was wrong this time to forget the type="Submit", but updated my question. In fact, even with the button correctly implemented the function called in onClick does not only work within this component. Off it on on other screens works properly.

  • can make available ContainerForm and ContentForm?

  • Your 'Test' component should return something, you’re probably having this error on your console ( if it’s not exploding on the interface like CRA does ). Another possibility may be that in your Component Styled, something is overwriting your button. Check this out by the browser element inspector and see if there’s anything above your button getting the interaction.

1 answer

0

const Teste = () => {
  return (
      <div>
        <input type="button" onClick={()=>console.log('ok')} value="clique"/>
      </div>
  )
}

The Test Component is not returning, so the button does not appear on the screen

Browser other questions tagged react

You are not signed in. Login or sign up in order to post.