Sé que esta pregunta se ha hecho antes, pero las soluciones publicadas allí no corrigieron mi problema.

Así que estoy trabajando con React y tengo un componente. Todo lo demás funciona bien, pero ahora estoy tratando de usar algunos estados de uso para obtener información dinámica, ya que tengo la intención de conectarme a una API/servidor más adelante.

También estoy usando componentes con estilo, por lo que verá nombres de etiquetas extraños. Estos funcionan bien porque trabajé en ellos primero y los tengo visibles cuando ejecuto npm start

El problema es que cuando trato de escribir algo que no sea 0 en esta entrada, se niega a actualizar y me da e.target is undefined

Aquí es donde ocurre mi error (en e.target.value ):

 <InnerWrap flexColumn> <AttributeFrame> <EngravingInput type= "text" placeholder="20" inputWidth="50px" name="charSTR" value={charAttributes.charSTR} onChange={(e) => handle_attr_Change(e.target.value)}/> <Spacer /> <>{((charAttributes.charSTR)-10)/2}</> <>STR</> </AttributeFrame> </InnerWrap>

Aquí está el useState (Recientemente aprendí que podría poner varios campos en un solo useState):

 const [charAttributes, set_CharAttributes] = useState( { charSTR: 0, charSTRmod: 0 });

Luego, aquí está la función que se supone que debe activarse en la parte onChange de la entrada de mi elemento:

 //This is in my component definition, before the return block const handle_attr_Change = (e) => { const value = e.target.value; set_CharAttributes( { ...charAttributes, [e.target.name]: value } );

La idea general es que se supone que el valor charSTRmod se actualice cada vez que el usuario escriba un número. Está destinado a calcular la bonificación de atributo para un atributo de fuerza de DnD 5e.

Captura de pantalla de la parte:

Por favor, ¿alguien podría decirme qué hice mal?