This problem appears in the console when I load my React application:

Warning: You provided a `value` prop to a form field without an `onChange`
handler. This will render a read-only field. If the field should be
mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

Below is my CustomersPage component:

import React from 'react';


const CustomersPage = (props) => {
    return ( <>
        <div className="mb-3 d-flex justify-content-between align-items-center">
            <h1>Liste des clients</h1>
            <a className="btn btn-primary" href="#">Créer un client</a>
        </div>
        <div className="form-group mb-3">
        <input type="text"  placeholder="Rechercher ..." value="" />
        </div>
        <table className="table table-hover">
            <thead>
                <tr className="table-secondary">
                    <th>Id.</th>
                    <th>Client</th>
                    <th>Email</th>
                    <th>Entreprise</th>
                    <th className="text-center">Factures</th>
                    <th className="text-center">Montant total</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>796</td>
                    <td>
                        <a href="#">Hope Lambert</a>
                    </td>
                    <td>[email protected]</td>
                    <td>Franks Porter Associates</td>
                    <td className="text-center">
                        <span className="badge bg-info">2</span>
                    </td>
                    <td className="text-center">54 €</td>
                    <td>
                        <button disabled="" className="btn btn-sm btn-danger">Supprimer</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </> );
}
 
export default CustomersPage;

CodePudding user response：

The best solution is the change the "value" of the input by defaultValue and dont' forget also to rename class tag by className

Like this:

<input type="text" className="form-control" placeholder="Rechercher ..." defaultValue="" />

Or simply delete the value tag if you want

Like this:

<input type="text" className="form-control" placeholder="Rechercher ..." />

best regards