REINITIALISER UNE CASE A COCHER APRES SOUMISSION D'UN FORMULAIRE

Salut pourrais tu fournir plus de code stp, parce que la comme ça on sait pas vraiment comment tu gere ton check déjà.

Coucou,

voilà (je suis en formation 😉)

import React, { useState } from 'react'
import emailjs from 'emailjs-com'

import MapLeaflet from '../../components/Client/Map.js'

const Contact = () => {
const [firstName, setFirstName] = useState('')
const [lastName, setLastName] = useState('')
const [phone, setPhone] = useState('')
const [email, setEmail] = useState('')
const [message, setMessage] = useState('')
const [valid, setValid] = useState(false)
const [consent, setConsent] = useState(true)

const handleSubmit = event => {
event.preventDefault()
emailjs.send(
'service_9ba3ccb',
'template_dnukio6',
{
firstName,
lastName,
phone,
email,
message
},
"le code d'accès que j'ai effacé pour le forum"
)
.then(() => {
setFirstName('')
setLastName('')
setPhone('')
setEmail('')
setMessage('')
setValid(!valid)
})
.catch(() => (document.querySelector('form-message').innerHTML =
"une erreur s'est produite.")
)
}

function reset() {
document.getElementById('').reset()
}

return (
<>
<div className='Contact'>
<div>
<h1 className='title-form'>Plus d'infos ?</h1>
</div>

  <form onSubmit={handleSubmit} className='contact-form'>

    <div className='form-group'>
      <input placeholder='Nom / Raison sociale *'
        type='text'
        value={lastName}
        className='lastName'
        name='last_name'
        required 
        onChange={event => setLastName(event.target.value)}
        />
    </div>
    <hr />

    <div className='form-group'>
      <input placeholder='Prénom'
        type='text'
        value={firstName}
        name='user_firstname'
        className='firstName'
        onChange={event => setFirstName(event.target.value)}
      />
    </div>
    <hr />

    <div className="form-group">
        <input placeholder="Email *"
          type="email"
          name="user_email"
          value={email}
          className="email"
          required
          onChange={event => setEmail(event.target.value)}
           />
    </div>
    <hr />

    <div className="form-group">
        <input type="tel"
          pattern="[0-9]{10}"
          maxLength="10"
          placeholder="Téléphone"
          value={phone}
          className="phone"
          onChange={event => setPhone(event.target.value)}
           />
    </div>
    <hr />

      <div className='form-group'>
        <textarea
          placeholder='Message *'
          value={message}
          name='message'
          required
          className='form-textarea'
          maxLength='150'
          onChange={event => setMessage(event.target.value)}
        />
      </div>
      <hr />
        {valid && <p className="p-valid">Message envoyé</p>}
    <div className="form-group">
      <input className="input-form" 
        type="submit"
        value='Envoyer'
        className="form-btn"
        />
    </div>
    <div className="consent">
  <input className="input-consent" type="checkbox"
    required
    /*consent={consent}
    onChange={() => setConsent(!consent)}*/
  />
   <p className="p-consent">En soumettant ce formulaire, j'accepte que les informations saisies soient exploitées dans le cadre de la relation commerciale qui pourrait en découler.</p>
 </div>
  </form>
</div>
<MapLeaflet />
</>
);
}

export default Contact;

Ok ok, pour ta checkbox ta déjà ta solution dans la checkbox elle meme, regarde mieux ce que tu fais en cas de succès ;-).

Par contre je ferai probablement plus un truc de ce type la

const [consent, setConsent] = useState(false) // a false par défaut, la t'impose direct à l'utilisateur d'exploiter ses données  
 <input className="input-consent" type="checkbox"
    required
    checked={consent} // chgt ici
    onChange={() => setConsent(!consent)}
  />

Et si je reprends ta demande initiale, il ne peut pas valider si case pas coché, hors tu ne fais aucun control la dessus, ni sur ta fonction d'envoi, ni sur ton bouton submit.

Pour ton message ta plusieurs solutions.

Soit tu l'anime en css avec un delay sur son apparition/disparition ( ce qui je penses est le mieux si tu n'a pas de redirection )
Soit apres validation sur un setTimeout de X sec tu repasses valid à false ( mais pas ouf )
Soit tu fais une redirection apres envoie du formulaire, en cas de succes, et tu gere ton state pour qu'il initialise tout le temps à false ton valid quand tu visite la page.