0

soy nuevo en react y estoy tratando de incrementar un numero cada vez que pulse un boton Increase, de momento estoy usando coderbyte para practicar ejercicios y este es el código con el que estoy intentando incrementar un numero por ejemplo que empieza a contar desde 0 ¿Alguien podría ayudarme por favor se los agradecería?

import React, { useState } from "react";
import { Text, View } from "react-native";

const SimpleCounter = () => {
  const [count, actualCount] = useState(0);
  let SimpleCounter = () => {
    actualCount(count + 1);
  };
  return (
    
    <View>
      <Text>button count: <span id="actualCount">0</span></Text>
      <button  action={SimpleCounter} id="mainButton">Increase</button>
    </View>
  );
};

export default SimpleCounter;

Y este es el error que recibo en la consola

Warning: Invalid value for prop %s on <%s> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://reactjs.org/link/attribute-behavior %s
`action`
button

    at button
    at div
    at eval (webpack://react/../../react-native/node_modules/react-native-web/dist/exports/View/index.js?:56:25)
    at SimpleCounter (webpack://react/./src/App.js?:24:66)
    at div
    at eval (webpack://react/../../react-native/node_modules/react-native-web/dist/exports/View/index.js?:56:25)
    at div
    at eval (webpack://react/../../react-native/node_modules/react-native-web/dist/exports/View/index.js?:56:25)
    at AppContainer (webpack://react/../../react-native/node_modules/react-native-web/dist/exports/AppRegistry/AppContainer.js?:22:24)

6
  • y cual es el error?
    – user46896
    Commented el 26 sept. 2022 a las 18:14
  • Buenas tardes @ArcanisGK507 acabo de editar mi pregunta con el error que me da en la consola de coderbyte
    – ALDO56
    Commented el 26 sept. 2022 a las 18:29
  • y que significa ese error?
    – user46896
    Commented el 26 sept. 2022 a las 18:37
  • 2
    button no tiene atributo action... no será que necesitas es ponerle onClick? para que al hacerle click al botón ejecute esa accion?
    – Pipe
    Commented el 26 sept. 2022 a las 19:17
  • 2
    Te hacen falta 2 cosas, lo primero es lo que te dijo @Pipe button no tiene atributo action tienes que utilizar onClick={simpleCounter} y además de eso te falta colocar la variable que captura el estado o sea count en el <Text>si no estara cambiando de estado pero nunca se va a mostrar en pantalla <Text>button count: <span id="actualCount">{count}</span></Text>
    – JoseMgz_Ux
    Commented el 26 sept. 2022 a las 19:38

1 respuesta 1

2

Solo tenes que hacerle algunos cambios al componente:

import React, { useState } from "react";
import { Text, View } from "react-native";

function SimpleCounter () {
  const [count, actualCount] = useState(0);
  let increase = () => {
    actualCount(count + 1);
  };
  return (
    
    <View>
      <Text>button count: <span id="actualCount">{count}</span></Text> /* ponemos {count} para mostrar el valor actual del contador en el span*/
      <button  onClick={increase} id="mainButton">Increase</button> /* al activarse el evento click se llama a la funcion y se incrementa el contador */
    </View>
  );
};

export default SimpleCounter;

no soy experto en React pero eso deberia funcionar, saludos.

2
  • Si, funciona perfecto de hecho estaba editando el código en CodeSandbox
    – JoseMgz_Ux
    Commented el 26 sept. 2022 a las 19:41
  • si, efectivamente funciona @ElFuturo y una llamada onClick era lo que le faltaba muchas gracias a todos
    – ALDO56
    Commented el 26 sept. 2022 a las 19:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.