[Solved]-NextJS Button keeps clicking itself by React's useState-Reactjs

without diving too deep into context and binding this in javascript, the problem is in your onclick handler. there are a few ways to solve it, but the gist is that you need to have a function that calls your update/submit function when handling events on dom elements.

the idea is that you're binding a function to handle the event, which will then call your function when the event happens.

one way is to create an inline anonymous function:

onclick={() => submitcomment(props.post, state.comment, state.comment)}

i personally prefer to keep this logic outside of the component body, so i'd instead move it up near the rest of your business logic:

// ev is the click event
const submitcomment = (ev) => {
  // you can read from state & props here
  firebase.firestore().collection('blogs').doc(props.post).update({ 
    comments: firebase.firestore.fieldvalue.arrayunion({
      name: state.name,
      date: new date().tostring(),
      text: state.comment
    })
  })
}

// later...
<button onclick={ submitcomment }>submit</button>

totally unrelated to the click issue, but also in your code you call:

const togglelike = () => setstate({ ...state, liked: !state.liked })

i just wanted to point out that you can use the current state in your setstate (for things like toggling likes as you are), but you should read from the previous state to ensure that you're not getting a bad value. the reason for this is that state changes are batched, not immediately fired. so you want to make sure you're reading the previous value before it's updated (in case anything else is updating it):

const togglelike = () => {
  setstate(prevstate => { ...prevstate, liked: !prevstate.liked })
}