Estoy tratando de crear la función onClick que cuando el usuario hace clic en el área de texto, se expande automáticamente por completo.

Aquí está mi base de código:

 class DynamicWidthInput extends React.Component { componentDidMount() { const { id, value } = this.props; resizable(document.getElementById(id), 16, value); } componentDidUpdate(prevProps) { const { id, value } = this.props; if (this.props.value !== prevProps.value) { resizable(document.getElementById(id), 16, value); } } render() { const { id, placeholder, type, onChange, value, error, size } = this.props; if (type === "textarea") { return ( <div style={{ display: "inline-block", verticalAlign: "top" }}> <textarea className={`input dynamic-input dynamic-textarea ${size}`} id={id} onChange={onChange} placeholder={placeholder} value={value} wrap="soft" maxLength="1000" {...this.props} /> {error && <p className="help is-danger">{error.message}</p>} </div> ); } ... } } export default DynamicWidthInput;

Así es como muestro el área de texto:

 <DynamicWidthInput id="addLoanClause" value={addLoanClause} type="textarea" placeholder="1000 characters" error={showErrors && getError("addLoanClause")} onChange={e => handleDynamicStateChange(e, setAddLoanClause) } size={"xxl"} rows="5" />{" "}

Así es como se ve mi proyecto:

Se esperaba una visualización completa como esta: