Busqué esto y lo más parecido que encontré fue esta publicación SO aquí ; sin embargo, no usa React.
Probé esta sintaxis a continuación que está dentro de un componente React:
<input value={props.value} onChange={props.onChange} className={props.className} placeholder={props.placeholder} name={props.name} {props.readonly && 'readonly'}>pero recibo un error de análisis de eslint y cuando verifico la interfaz de usuario todavía se puede escribir.
Elimine {props.readonly && 'readonly'} y agregue readonly={props.readonly} Consulte aquí para ver la descripción del atributo de solo lectura.
Su problema es que el elemento de entrada (y todos los componentes de reacción) solo toma pares clave/valor en forma de clave = {valor}, pero está tratando de insertar un poco de código javascript sin asignar el valor del resultado a una clave.
Editar: debe usar el atributo de solo lectura, no deshabilitado, como se menciona en los comentarios.
Podría tener una input sin onChange cuando props.readonly es true . Algo como esto:
<input value={props.value} onChange={props.readonly ? undefined : props.onChange} className={props.className} placeholder={props.placeholder} name={props.name} />Use la propiedad readOnly y pásele un valor booleano
const Example = (props) => { return ( <input readOnly={props.readonly} value={props.title}/> ); }; // Render it ReactDOM.render( <Example title="Example using Hooks:" readonly={true}/>, document.getElementById("react") ); [readonly] {color:red} <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>